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

Attribute Starts With Selector

Attribute Starts With 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ử có thuộc tính mà giá trị bắt đầu bằng một chuỗi cụ thể.

1. Cú pháp

Mục đích của “Attribute Starts With Selector” ([attribute^='value']) là chọn các phần tử mà có thuộc tính attribute và giá trị bắt đầu bằng chuỗi value.

Cú pháp:

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

Hoặc

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

Tham số:

  • attribute: Tên của thuộc tính mà bạn muốn kiểm tra.
  • 'value': Chuỗi mà bạn muốn so sánh với giá trị thuộc tính. Selector này sẽ chọn các phần tử mà giá trị của thuộc tính attribute bắt đầu bằng chuỗi này.

Phiên bản hỗ trợ:

  • jQuery version 1.0 và các phiên bản sau này.

“Attribute Starts With Selector” ([attribute^='value']) trong thư viện jQuery là phân biệt chữ hoa và chữ thường (case-sensitive). Điều này có nghĩa là nó chỉ sẽ chọn các phần tử mà giá trị của thuộc tính attribute bắt đầu chính xác với chuỗi value, bao gồm cả sự khác biệt về chữ hoa và chữ thường.

Attribute Starts With Selector

2. Một số ví dụ

2.1. Attribute Starts With Selector tìm kiếm bắt đầu với giá trị

Đoạn mã HTML và jQuery đang thực hiện việc chọn các phần tử có thuộc tính data-category bắt đầu bằng chuỗi “fruit” và đặt màu chữ của chúng thành màu xanh lá cây.

<!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-category" bắt đầu bằng 'fruit'
      $("[data-category^='fruit']").css("color", "green");
    });
  </script>
</head>
<body>

<p data-category="fruit-apple">Apple</p>
<p data-category="fruit banana">Banana</p>
<p data-category="fruit1">Strawberry</p>
<p data-category="vegetable-carrot">Carrot</p>

</body>
</html>

Trong trường hợp này, chúng ta sử dụng “Attribute Starts With Selector” của jQuery ([attribute^='value']). Điều này nghĩa là nó sẽ chọn tất cả các phần tử có thuộc tính data-category mà giá trị bắt đầu bằng chuỗi “fruit”.

Như vậy, “Attribute Starts With Selector” cho phép chọn tất cả các phần tử có thuộc tính data-category mà giá trị bắt đầu bằng chuỗi “fruit”, không cần quan tâm đến ký tự tiếp theo, khoảng trắng hoặc dấu gạch ngang.

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

Attribute Starts With Selector ([attribute^='value']) trong jQuery phân biệt chữ hoa và chữ thường. Dưới đây là một ví dụ minh họa:

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(){
      // Chọn các phần tử có thuộc tính "data-category" bắt đầu bằng 'Fruit'
      $("[data-category^='Fruit']").css("background-color", "yellow");
    });
  </script>
</head>
<body>

<p data-category="Fruit-Apple">Apple</p>
<p data-category="fruit-banana">Banana</p>
<p data-category="Fruit1">Strawberry</p>
<p data-category="vegetable-carrot">Carrot</p>

</body>
</html>

Trong ví dụ này, chúng ta sử dụng ("[data-category^='Fruit']") để chọn các phần tử có thuộc tính data-category mà giá trị bắt đầu bằng chuỗi “Fruit”.

Tuy nhiên, nó sẽ phân biệt chữ hoa và chữ thường, nên chỉ các phần tử mà giá trị data-category bắt đầu chính xác với “Fruit” (với chữ F viết hoa) mới được chọn và thay đổi màu nền thành màu vàng. Các phần tử với giá trị data-category bắt đầu với “fruit” (viết thường) sẽ không được chọn.

2.3. Thay thế Attribute Starts With Selector bằng các hàm jQuery API

Trong jQuery API, hàm tương ứng với “Attribute Starts With Selector” ([attribute^=’value’]) là hàm filter().

Hãy xem một ví dụ sử dụng hàm filter() trong jQuery API để chọn các phần tử với thuộc tính data-category bắt đầu bằng “Fruit”:

<!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 .filter() để chọn các phần tử có thuộc tính "data-category" bắt đầu bằng 'Fruit'
      $("[data-category]").filter(function() {
        return $(this).attr('data-category').startsWith('Fruit');
      }).css("background-color", "yellow");
    });
  </script>
</head>
<body>

<p data-category="Fruit-Apple">Apple</p>
<p data-category="fruit-banana">Banana</p>
<p data-category="Fruit1">Strawberry</p>
<p data-category="vegetable-carrot">Carrot</p>

</body>
</html>

Trong ví dụ này, chúng ta sử dụng hàm filter() để chọn các phần tử có thuộc tính data-category và lọc bớt chỉ các phần tử mà giá trị data-category bắt đầu chính xác với “Fruit” (với chữ F viết hoa). Sau đó, chúng thay đổi màu nền thành màu vàng cho các phần tử đã được lọc.

Related posts