/Attribute Contains Selector
Các hàm built-in29/09/2023

Attribute Contains Selector

Attribute Contains 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 các phần tử mà có thuộc tính chứa một chuỗi xác định. Nó cho phép lựa chọn linh hoạt các phần tử dựa trên giá trị của thuộc tính.

Quy tắc tìm kiếm của Attribute Contains Selector [name*=”value”]: Selector này tìm kiếm và chọn tất cả các phần tử mà thuộc tính name của chúng chứa chuỗi “value”. Điều này có nghĩa là bất kỳ phần tử nào có giá trị thuộc tính name chứa chuỗi “value” (dù là phần của một từ hoặc toàn bộ từ), đều sẽ được chọn.

1. Cú pháp của Attribute Contains Selector

Attribute Contains Selector [name*="value"] trong jQuery là case-sensitive, nghĩa là nó phân biệt chữ hoa và chữ thường khi tìm kiếm.

Cú pháp:

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

Hoặc

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

Tham số:

  • attribute: Tên của thuộc tính.
  • value: Chuỗi cần kiểm tra xem có tồn tại trong giá trị của thuộc tính hay không.

Phiên bản hỗ trợ:

  • Attribute Contains Selector đã được thêm vào jQuery từ phiên bản 1.0 trở đi.

Mô tả:

Selector này chọn các phần tử mà thuộc tính có giá trị chứa một chuỗi xác định. Nó là một cách rất linh hoạt để chọn các phần tử dựa trên một phần của giá trị thuộc tính. Ví dụ, nếu bạn muốn chọn tất cả các phần tử có thuộc tính href chứa một chuỗi nhất định (ví dụ: “example”), bạn có thể sử dụng selector [href*="example"].

So với Attribute Contains Word selector (ví dụ: [attr~="word"]), Attribute Contains Selector chọn các phần tử dựa trên việc chuỗi xuất hiện bất kỳ đâu trong giá trị thuộc tính, trong khi Contains Word Selector chỉ chọn khi có một từ riêng biệt khớp.

Attribute Contains Selector

2. Một số ví dụ

2.1. Attribute Contains Selector để tìm kiếm phân biệt hoa thường

Dưới đây là một ví dụ minh họa việc sử dụng Attribute Contains Selector [attribute*="value"] với một thuộc tính bất kỳ (ví dụ: href) trong thư viện jQuery và có phân biệt hoa thường:

Code HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Attribute Contains Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<a href="https://example.com">Link 1</a>
<a href="https://Example.org">Link 2</a>
<a href="https://anotherexample.com">Link 3</a>

<button onclick="search()">Search Links with 'example'</button>

<script>
function search() {
  // Sử dụng Attribute Contains Selector để tìm kiếm các liên kết có chứa "example" trong href
  var linksWithExample = $("a[href*='example']");
  
  // Làm việc với các phần tử đã tìm được
  linksWithExample.css("color", "red");
}
</script>

</body>
</html>

Trong ví dụ này, khi bạn nhấn nút “Search Links with ‘example'”, các liên kết có thuộc tính href chứa chuỗi “example” sẽ được thay đổi màu thành đỏ.

2.2. Attribute Contains Selector với thuộc tính ID của các thẻ

Đây là một ví dụ sử dụng Attribute Contains Selector với thuộc tính ID của các thẻ trong thư viện jQuery:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Attribute Contains Selector with ID Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* CSS để tô màu cho các phần tử khi được chọn */
    .highlighted {
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="item-example">Item 1</div>
<div id="example-item">Item 2</div>
<div id="another-example-item">Item 3</div>

<button onclick="search()">Search Items with 'example'</button>

<script>
function search() {
  // Sử dụng Attribute Contains Selector để tìm kiếm các phần tử có chứa "example" trong ID
  var elementsWithExample = $("[id*='example']");
  
  // Thêm lớp 'highlighted' để tô màu cho các phần tử đã tìm được
  elementsWithExample.addClass("highlighted");
}
</script>

</body>
</html>

Trong ví dụ này:

  • Có 3 thẻ <div> với các giá trị thuộc tính id khác nhau.
  • Có một nút <button> với sự kiện onclick gọi hàm search().

Hàm search() được gọi khi nút được nhấn:

  • Trong hàm search(), sử dụng $("[id*='example']") để chọn tất cả các thẻ có thuộc tính id chứa chuỗi “example”.
  • Sau đó, thêm lớp highlighted để tô màu các phần tử đã tìm được.

Khi bạn nhấn nút “Search Items with ‘example'”, các phần tử có ID chứa chuỗi “example” sẽ được tô màu nền màu vàng.

2.3. Attribute Contains Selector để chọn với tên tag

Dưới đây là một ví dụ minh họa việc sử dụng Attribute Contains Selector để lựa chọn các phần tử theo tên tag và thuộc tính chung:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Attribute Contains Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* CSS để tô màu cho các phần tử khi được chọn */
    .highlighted {
      background-color: yellow;
    }
  </style>
</head>
<body>

<h2>Select the Correct Element!</h2>

<div>
  <p id="question">Which element has 'example' in its class attribute? Click it!</p>
  <button onclick="checkAnswer()">Check Answer</button>
</div>

<p class="sample">p tag with class "sample"</p>
<p class="another-example">p tag with class "another-example"</p>
<div class="example-class">Div tag with class "example-class"</div>

<script>
function checkAnswer() {
  // Sử dụng Attribute Contains Selector để chọn các phần tử có class chứa "example"
  var elementsWithExampleClass = $("p[class*='example']");
  
  // Thêm lớp 'highlighted' để tô màu cho các phần tử đã tìm được
  elementsWithExampleClass.addClass("highlighted");
}
</script>

</body>
</html>

Trong ví dụ này:

  • Có một đoạn văn bản hỏi người chơi phải chọn phần tử có class chứa “example”.
  • Có một nút “Check Answer” gọi hàm checkAnswer() khi được nhấn.

Hàm checkAnswer() được gọi khi nút “Check Answer” được nhấn:

  • Trong hàm checkAnswer(), sử dụng $("p[class*='example']") để chọn tất cả các phần tử p có class chứa chuỗi “example”.
  • Sau đó, thêm lớp highlighted để tô màu các phần tử đã tìm được.

Người chơi cần nhấn vào phần tử mà họ cho là đúng, và khi nhấn “Check Answer”, các phần tử p có class chứa chuỗi “example” sẽ được tô màu nền màu vàng.

Related posts