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

Attribute Equals Selector

Attribute Equals 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ế cho mục đích để chọn các phần tử mà có thuộc tính với giá trị chính xác bằng với một giá trị đã được xác định.

1. Cú pháp

Selector “Attribute Equals Selector” trong thư viện jQuery là case-sensitive. Điều này có nghĩa là nó phân biệt chữ hoa và chữ thường khi tìm kiếm giá trị của thuộc tính.

Chẳng hạn, nếu bạn tìm kiếm một giá trị chính xác “Value”, nó sẽ chỉ tìm các phần tử mà thuộc tính có giá trị là “Value”, và không tìm thấy nếu giá trị là “value” hoặc “VALUE”.

Mục đích:

  • Chọn các phần tử mà có thuộc tính cụ thể với giá trị chính xác đã được chỉ định.

Cú pháp:

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

Hoặc:

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

Trong đó:

  • attribute: Tên thuộc tính của phần tử mà bạn muốn so sánh.
  • value: Giá trị mà bạn muốn phần tử có.

Phiên bản hỗ trợ:

  • Phiên bản 1.0 và các phiên bản sau này.
Attribute Equals Selector

2. Một số ví dụ

2.1. Attribute Equals Selector tìm kiếm chính xác

Dưới đây là một ví dụ về cách sử dụng Attribute Equals Selector trong jQuery để tìm kiếm chính xác:

HTML Code:

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

<button onclick="search()">Search for elements with attribute value 'example'</button>
<div data-value="not-example">This element has data-value='not-example'</div>
<div data-value="example">This element has data-value='example'</div>
<div data-value="example1">This element has data-value='example1'</div>
<div data-value="1example">This element has data-value='1example'</div>
<div data-value="other example">This element has data-value='other example'</div>

<script>
function search() {
  // Sử dụng Attribute Equals Selector để tìm các phần tử với giá trị thuộc tính là 'example'
  var elementsWithExampleValue = $("[data-value='example']");
  
  // Làm việc với các phần tử đã tìm được
  elementsWithExampleValue.css("font-weight", "bold");
}
</script>

</body>
</html>

Trong ví dụ này, chúng ta tìm kiếm các phần tử có thuộc tính data-value chính xác bằng “example” bằng cách sử dụng Attribute Equals Selector.

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

Attribute Equals Selector trong jQuery phân biệt hoa thường khi tìm kiếm. Dưới đây là một ví dụ để minh họa điều này:

HTML Code:

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

<button onclick="search()">Search for elements with attribute value 'Example'</button>
<div data-value="Example">This element has data-value='Example'</div>
<div data-value="example">This element has data-value='example'</div>

<script>
function search() {
  // Sử dụng Attribute Equals Selector để tìm các phần tử với giá trị thuộc tính là 'Example' (phân biệt hoa thường)
  var elementsWithExampleValue = $("[data-value='Example']");
  
  // Làm việc với các phần tử đã tìm được
  elementsWithExampleValue.css("font-weight", "bold");
}
</script>

</body>
</html>

Trong ví dụ này, chúng ta tìm kiếm các phần tử có thuộc tính data-value chính xác bằng “Example”, và selector [data-value='Example'] sẽ phân biệt hoa thường, chỉ chọn các phần tử có giá trị data-value chính xác là “Example” (không phân biệt hoa thường).

2.3. Attribute Equals Selector tìm kiếm theo thẻ

Dưới đây là một ví dụ về trò chơi đơn giản dùng “Attribute Equals Selector kết hợp với tên thẻ” để xác định đối tượng cần tìm kiếm.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Game with Attribute Equals Selector</title>
  <style>
    .shape {
      width: 100px;
      height: 100px;
      margin: 10px;
      display: inline-block;
    }
    .square {
      background-color: blue;
    }
    .circle {
      background-color: red;
      border-radius: 50%;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="shape" data-type="square">Square</div>
<div class="shape" data-type="circle">Circle</div>
<input type="text" id="guess" placeholder="Enter your guess">
<button onclick="checkGuess()">Check</button>

<script>
function checkGuess() {
  var userInput = $('#guess').val();
  
  if (userInput.toLowerCase() === "square") {
    var foundShape = $('div[data-type="square"]');
    foundShape.css('background-color', 'green');
    alert('You found the square!');
  } else if (userInput.toLowerCase() === "circle") {
    var foundShape = $('div[data-type="circle"]');
    foundShape.css('background-color', 'green');
    alert('You found the circle!');
  } else {
    alert('Try again!');
	var foundShape = $('div[class="shape"]');
	foundShape.css('background-color', 'white');
  }
}
</script>

</body>
</html>

Trong ví dụ này, chúng ta có hai hình (một hình vuông và một hình tròn) được xác định bởi thuộc tính dữ liệu “data-type” với giá trị “square” và “circle”.

Chúng ta sử dụng Attribute Equals Selector [data-type='square'] hoặc [data-type='circle'] kết hợp với tên thẻ để xác định hình mà người dùng cần tìm kiếm.

Khi người dùng nhập tên hình vào ô input và nhấn nút “Check”, chúng ta kiểm tra xem tên hình mà người dùng đã nhập có khớp với hình vuông hoặc hình tròn không. Nếu đúng, chúng ta đổi màu nền của hình và thông báo người dùng đã tìm thấy hình tương ứng.

Related posts