/Attribute Not Equal Selector
Các hàm built-in30/09/2023

Attribute Not Equal Selector

Attribute Not Equal Selector là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để chọn để chọn các phần tử mà không có thuộc tính được chỉ định hoặc có thuộc tính nhưng có giá trị khác với giá trị đã cho.

1. Cú pháp

Trong jQuery, “Attribute Not Equal Selector” ([attribute!='value']) thực sự là phân biệt chữ hoa và chữ thường (case-sensitive).

Điều này có nghĩa là khi bạn sử dụng selector này, nó sẽ chỉ chọn các phần tử có thuộc tính attribute và giá trị không giống hoàn toàn với value, bao gồm cả sự khác biệt về chữ hoa, chữ thường và kí tự đặc biệt.

Cú pháp:

$("[attribute!='value']")

Hoặc:

jQuery("[attribute!='value']")

  • attribute: Tên của thuộc tính mà bạn muốn kiểm tra.
  • 'value': Giá trị mà bạn muốn so sánh với thuộc tính. Các phần tử mà thuộc tính này không có giá trị hoặc khác với giá trị này sẽ được chọn.

Phiên bản hỗ trợ:

  • Attribute Not Equal Selector đã được giới thiệu từ phiên bản 1.0 của jQuery.

Mục đích:

  • Mục đích của “Attribute Not Equal Selector” là lọc ra các phần tử trong DOM mà có thuộc tính không bằng một giá trị cụ thể.

Chú ý: Bởi vì việc tìm kiếm theo Attribute Not Equal Selector [name!="value"] là một phần mở rộng của thư viện Query và không phải là một phần của quy định CSS, các truy vấn sử dụng [name!="value"] không thể tận dụng lợi ích về hiệu suất mà phương thức native DOM querySelectorAll() cung cấp. Để có hiệu suất tốt hơn trên các trình duyệt hiện đại, hãy sử dụng $("pure-css-selector" ).not( "[name='value']" thay thế.

Attribute Not Equal Selector

2. Một số ví dụ

2.1. Attribute Not Equal Selector tác động nhiều phần tử

Trong ví dụ dưới đây Attribute Not Equal Selector tác động nhiều phần tử.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Chọn các phần tử có thuộc tính "data-status" khác 'completed'
      $("[data-status!='ompleted']").css("background-color", "yellow");
    });
  </script>
</head>
<body>

<p data-status="incomplete">Task 1</p>
<p data-status="completed">Task 2</p>
<p>No status</p>
<div>Div tag</div>

</body>
</html>

Mã JavaScript sử dụng $("[data-status!='completed']") để chọn tất cả các phần tử mà có thuộc tính data-status không bằng ‘completed’ và thay đổi màu nền của chúng thành màu vàng. Selector này không chỉ áp dụng cho các thẻ <p>, mà cũng áp dụng cho tất cả các phần tử trong tài liệu mà có thuộc tính data-status không bằng ‘completed’, bao gồm <body> và <div>.

Như vậy, trong ví dụ này, cả <p>, <body>, và <div> đều được tác động bởi mã JavaScript để thay đổi màu nền thành màu vàng.

2.2. Attribute Not Equal Selector phân biệt hoa thường

Ví dụ dưới đây sẽ minh họa sự phân biệt chữ hoa và chữ thường của Attribute Not Equal Selector trong jQuery:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Chọn các phần tử có thuộc tính "data-status" không phân biệt chữ hoa, chữ thường
      $("p[data-status!='Completed']").css("background-color", "yellow");
    });
  </script>
</head>
<body>

<p data-status="Completed">Task Completed</p>
<p data-status="COMPLETED">Task COMPLETED</p>
<p data-status="completed">Task completed</p>

</body>
</html>

Trong đoạn mã này, chúng ta sử dụng $("p[data-status!='Completed']") để chọn các phần tử <p> mà có thuộc tính data-status không bằng “Completed” (không phân biệt chữ hoa, chữ thường). Điều này đồng nghĩa rằng nó sẽ chỉ chọn các phần tử <p> mà data-status không giống chính xác “Completed”, bất kể chữ hoa, chữ thường.

2.3. Thay thế Attribute Not Equal Selector bằng hàm not()

Dưới đây là một ví dụ minh họa cho việc sử dụng .not("[name='value']") thay thế cho “Attribute Not Equal Selector” [name!="value] trong jQuery:

HTML code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Sử dụng .not("[name='value']") để chọn các phần tử khác giá trị "value" cho thuộc tính name
      $("input").not("[name='value']").css("background-color", "yellow");
    });
  </script>
</head>
<body>

<input type="text" name="value" placeholder="Value input">
<input type="text" name="other" placeholder="Other input">
<input type="text" name="another" placeholder="Another input">

</body>
</html>

Trong ví dụ này, chúng ta sử dụng .not("[name='value']") để chọn các phần tử <input> có thuộc tính name không bằng “value”, và thay đổi màu nền của chúng thành màu vàng. Cả hai cách làm này đều có kết quả tương tự.

Related posts