Định nghĩa và sử dụng

  • .not(): Không chọn thành phần nào có sử dụng .not().

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.not('Bộ chọn')

$('p').not(":even");
  • Đã được thêm vào từ phiên bản 1.4

.not(function(index){...})

$('p').not(function(index){...});

.not(jQuery object)

$('p').not($("#selected")[0]);

.not('Bộ chọn')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').not('.notSelected').css('color','red');
});
</script>
</head>

<body>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li class="notSelected">Thành phần li</li>
<li>Thành phần li</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần có class="notSelected" đã không được chọn.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li class="notSelected">Thành phần li</li>
<li>Thành phần li</li>
</ul>

<ul>
<li style="color: red;">Thành phần li</li>
<li style="color: red;">Thành phần li</li>
<li class="notSelected">Thành phần li</li>
<li style="color: red;">Thành phần li</li>
</ul>

.not(function(index){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
table { width: 100%; }
th,td {
    border: 1px solid blue;
    width: 30%;
}
</style>
<script>
$(function(){
    $('td').not(function(index){
        return $('strong', this).length == 1;
    }).css('background-color','yellow');
});
</script>
</head>

<body>
<table>
<tr>
<th>th</th>
<td><strong>td</strong></td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td><strong>td</strong></td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Đoạn code trên chỉ chọn những thành phần <td> nào không có chứa thành phần <strong>.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<table>
<tr>
<th>th</th>
<td><strong>td</strong></td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td><strong>td</strong></td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</ul>

<table>
<tr>
<th>th</th>
<td><strong>td</strong></td>
<td style="background-color: yellow;">td</td>
</tr>

<tr>
<th>th</th>
<td><strong>td</strong></td>
<td style="background-color: yellow;">td</td>
</tr>

<tr>
<th>th</th>
<td style="background-color: yellow;">td</td>
<td style="background-color: yellow;">td</td>
</tr>
</ul>

.not('jQuery Object')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
table { width: 100%; }
th,td {
    border: 1px solid blue;
    width: 30%;
}
</style>
<script>
$(function(){
    $('table *').not($('tbody, tr, th')).css('background-color','yellow');
});
</script>
</head>

<body>
<table>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Đoạn code trên chọn tất cả thành phần có trong table, ngoại trừ thành phần <tbody>, <tr>, <th>.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<table>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>

<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</ul>

<table>
<tr>
<th>th</th>
<td style="background-color: yellow;">td</td>
<td style="background-color: yellow;">td</td>
</tr>

<tr>
<th>th</th>
<td style="background-color: yellow;">td</td>
<td style="background-color: yellow;">td</td>
</tr>

<tr>
<th>th</th>
<td style="background-color: yellow;">td</td>
<td style="background-color: yellow;">td</td>
</tr>
</ul>