Người Viết : ViKiMi Editor
Phương Thức Not trả về kết quả trái ngược với Phương Thức Filter. Hỗ trợ Thiết Kế Tốt.
Sử dụng những cách Duyệt / Tìm kiếm thông thường rất phổ biến. Tuy nhiên, với Lọc các phần tử theo chiều hướng ngược lại thì có vẻ như rất ít khi sử dụng. Liệu điều đó có trở nên hữu ích hay không? Chắc chắn những gì ít xảy ra và trái ngược cũng sẽ là điều cần thiết. Sự cần thiết này đó là do nó đem lại một kết quả mới với Tiêu chí trả về Ngược lại cách thông thường.
Từ trước này hầu như Chúng ta chỉ quen với những Tiêu chí là cần điều gì thì làm điều đó, Lọc ra kết quả đó.
Hành động theo cách ngược lại :
+ Chúng ta trả về các phần tử không khớp Tiêu Chí
+ Chúng ta sẽ sử dụng cách hiểu phủ định là NOT
jQUERY CUNG CẤP PHƯƠNG THỨC :
+ Phương Thức Not( )
A ] Phương Thức Not( )
Phương Thức này trả về tất cả các phần tử không khớp với Tiêu Chí
+ Phương Thức này trái ngược với Filter( )
CÚ PHÁP :
+ $( SELECTOR ). not( Param );
+ $( SELECTOR ). not( Function );
[ Param ] : Selector
Function : Hàm duyệt qua tất cả Tập Hợp phần tử, để trả về kết quả.
Nó sử 2 đối số là : index và phần tử DOM. Trong nội dung Hàm sẽ đề cập đến phần tử hiện tại.
EXAMPLE 1 ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div"). not(".highlights"). css( "background-color", "yellow" );
});
</script>
</head>
<body>
<h1>SỬ DỤNG NOT METHOD</h1>
<p>Duyệt Phần tử DIV Không Khớp Theo Tiêu Chí trên cây DOM.</p>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div class= "highlights" style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div class= "highlights" style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
<br>
<div style="border: 1px solid black;">
<h1>THẺ DIV THỨ TƯ</h1>
<p>Đoạn Văn Bản Thứ Tư.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :
EXAMPLE 2 :: KIỂM TRA TỪNG PHẦN TỬ TRONG TẬP HỢP VÀ TRẢ VỀ PHẦN TỬ KHÔNG KHỚP TIÊU CHÍ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "div" ). css({ "padding" : "1%", "background" : "lightsalmon" });
/** Thực hiện Xâu Chuỗi các Phương Thức
* + Bước 1 : Sử dụng Not Method với Function kiểm tra
* Từng phần Tử trong tập hợp Div. Trả về
* Phần Tử Không Có Chỉ Mục Chẵn ( VD : 1,3,5 ... )
* Và Không phải phần Tử #fifth
* + Bước 2 : Thiết lập Background là yellow
*/
$( "div" )
.not(function( index, element ) {
return ( index + 1 ) % 2 == 0 || $( this ).attr( "id" ) === "fifth";
})
.css( "background", "yellow" );
});
</script>
</head>
<body>
<h1>SỬ DỤNG NOT METHOD</h1>
<p>Duyệt Phần tử DIV Không Khớp Theo Tiêu Chí trên cây DOM.</p>
<div id="first" style="border: 1px solid black;">
<h1>THẺ DIV THỨ NHẤT</h1>
<p>Đoạn Văn Bản Thứ Nhất.</p>
</div>
<br>
<div id="second" style="border: 1px solid black;">
<h1>THẺ DIV THỨ HAI</h1>
<p>Đoạn Văn Bản Thứ Hai.</p>
</div>
<br>
<div id="third" style="border: 1px solid black;">
<h1>THẺ DIV THỨ BA</h1>
<p>Đoạn Văn Bản Thứ Ba.</p>
</div>
<br>
<div id="fourth" style="border: 1px solid black;">
<h1>THẺ DIV THỨ TƯ</h1>
<p>Đoạn Văn Bản Thứ Tư.</p>
</div>
<br>
<div id="fifth" style="border: 1px solid black;">
<h1>THẺ DIV THỨ NĂM</h1>
<p>Đoạn Văn Bản Thứ Năm.</p>
</div>
</body>
</html>
Hình Ảnh Kết Quả :
Như vậy, Không khó để Duyệt trên cây DOM và trả về các phần tử không khớp Tiêu Chí. Cách này sử dụng NOT để tìm các phần tử không khớp Tiêu Chí. Đây là một cách được dùng khá nhiều trong ngôn ngữ lập trình. Nó cho phép tìm ra các phần tử ít gặp, nhưng đem lại kết quả là có thể làm nổi bật những điểm nhấn không phổ biến.
+ Phương Thức Not ( ) Có thể đem lại hiệu quả cao khi thiết kế
+ Phương Thức này trái ngược lại với Phương Thức Filter ( )
