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

Attribute Contains Prefix Selector

Attribute Contains Prefix Selector là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery là một loại selector (chọn lọc) được sử dụng để chọn các phần tử mà có thuộc tính có giá trị bắt đầu bằng một chuỗi cụ thể.

Nó chọn tất cả các phần tử có thuộc tính id bắt đầu bằng chuỗi “section” và kết thúc bằng dấu gạch ngang “-“.

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

Attribute Contains Prefix 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: Đây là tên của thuộc tính mà bạn muốn chọn.
  • value: Đây là chuỗi mà giá trị thuộc tính cần bắt đầu.

Selector này sẽ chọn tất cả các phần tử mà thuộc tính attribute có giá trị bắt đầu bằng chuỗi value, kết hợp với dấu gạch ngang “-“. Xem ví dụ để hiểu rõ hơn:

Phiên bản jQuery:

  • Selector này đã được hỗ trợ từ phiên bản jQuery 1.0.
Attribute Contains Prefix Selector

2. Một số ví dụ

2.1. Attribute Contains Prefix Selector với dấu gạch ngang

Đây là một ví dụ để giải thích rõ hơn:

<!DOCTYPE html>
<html>
<head>
  <title>Attribute Contains Prefix Selector Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="section-1">Element with ID starting with section-</div>
  <div id="section-2">Element with ID starting with section-</div>
  <div id="section123">Element with ID starting with section but not a match</div>

  <script>
    $(document).ready(function() {
      // Selects elements with ID starting with "section-"
      $('[id|="section"]').css('color', 'blue');
    });
  </script>
</body>
</html>

Trong ví dụ này, selector [id|="section"] chọn tất cả các phần tử có thuộc tính id bắt đầu bằng chuỗi “section” và kết hợp với dấu gạch ngang “-“.

2.2. Attribute Contains Prefix Selector với css class

Attribute Contains Prefix Selector để chọn các phần tử dựa trên một thuộc tính có giá trị cụ thể:

Chọn các sản phẩm theo loại:

Code HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Selection Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .product {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
    }
  </style>
  <script>
    $(document).ready(function() {
      // Khi nút được click, chọn sản phẩm theo loại
      $("#selectBooks").on("click", function() {
        $(".product[category|='books']").css("background-color", "lightblue");
      });

      $("#selectElectronics").on("click", function() {
        $(".product[category|='electronics']").css("background-color", "lightgreen");
      });
    });
  </script>
</head>
<body>
  <div class="product" category="books">Book 1</div>
  <div class="product" category="electronics">Phone 1</div>
  <div class="product" category="books">Book 2</div>
  <div class="product" category="electronics">Laptop 1</div>

  <button id="selectBooks">Select Books</button>
  <button id="selectElectronics">Select Electronics</button>
</body>
</html>

Trong ví dụ này, chúng ta sử dụng |= để chọn các sản phẩm dựa trên loại (category) của chúng. Khi nút được click, các sản phẩm có thuộc tính category bắt đầu bằng giá trị quy định sẽ được chọn và thay đổi màu nền.

Bạn có thể thử thay đổi giá trị category và xem kết quả thay đổi.

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

Ví dụ dưới đây là một trò chơi sử dụng thư viện jQuery và Attribute Contains Prefix Selector để chọn các phần tử theo tên tag

<!DOCTYPE html>
<html>
<head>
  <title>Game Example using Attribute Contains Prefix Selector</title>
  <style>
    .target {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="game-container">
    <div id="target-1" class="target" style="top: 100px; left: 100px;"></div>
    <div id="target-2" class="target" style="top: 200px; left: 300px;"></div>
    <div id="target-other" class="target" style="top: 300px; left: 500px;"></div>
  </div>
  
  <p id="target">Click và các ô hình chữ nhật màu đỏ</p>

  <script>
    $(document).ready(function() {
      // Function to handle target click
      function handleTargetClick() {
        alert("You hit a target!");
      }

      // Use Attribute Contains Prefix Selector to select elements starting with "target-"
      $('div[id|="target"]').click(handleTargetClick);
    });
  </script>
</body>
</html>

Trong ví dụ này, chúng ta tạo ra ba phần tử div với IDs khác nhau, và chỉ chọn các phần tử có ID bắt đầu bằng “target-” bằng cách sử dụng [id|="target"]. Khi phần tử được chọn (được click), một thông báo xuất hiện để thông báo rằng bạn đã trúng mục tiêu.

Related posts