Attribute Ends 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 kết thúc bằng một chuỗi cụ thể.
1. Cú pháp
Tìm kiếm phần tử với “Attribute Ends With Selector” trong thư viện jQuery là có sự phân biệt hoa thường (sensitive) khi so sánh giá trị thuộc tính kết thúc với chuỗi xác định.
Cú pháp:
$("[attribute$='value']")
Hoặc:
jQuery("[attribute$='value']")
Trong đó:
attribute: Tên thuộc tính cần kiểm tra.
value: Chuỗi kết thúc mà chúng ta muốn so sánh.
Phiên bản hỗ trợ:
- Attribute Ends With Selector đã được giới thiệu từ phiên bản 1.0 của jQuery.
2. Một số ví dụ
2.1. Attribute Ends With Selector tìm kiếm chứa
Attribute Ends With Selector tìm kiếm theo quy tắc chứa, không phân biệt theo word như Attribute Contains Word Selector .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Ends With 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 'example' at the end</button>
<div class="one example">div tag with class "one example"</div>
<div class="anotherexample">div tag with class "anotherexample"</div>
<div class="another-example">div tag with class "another-example"</div>
<script>
function search() {
// Sử dụng Attribute Ends With Selector để tìm các phần tử có class kết thúc bằng 'example'
var elementsWithExampleClass = $("[class$='example']");
// Làm việc với các phần tử đã tìm được
elementsWithExampleClass.css("color", "blue");
}
</script>
</body>
</html>
Trong ví dụ này, khi nhấn nút “Search”, chỉ cẩn phần tử có class kết thúc bằng 'example' sẽ được tìm thấy và không phân biệt nó có chữ cái gì ở phái trước và sau khi tìm thấy màu chữ của chúng sẽ được thay đổi thành màu xanh.
2.2. Attribute Ends With Selector phân biệt hoa thường
Sự phân biệt hoa thường khi sử dụng “Attribute Ends With Selector” được minh họa bởi các class CSS. Trong ví dụ, ta có các class CSS là "someexample", "AnotherExample", và "notEXAMPLE".
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Ends With Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="search()">Search for elements ending with 'Example'</button>
<div class="someexample">This is someExample</div>
<div class="AnotherExample">This is AnotherExample</div>
<div class="notEXAMPLE">This is notExample</div>
<script>
function search() {
// Sử dụng Attribute Ends With Selector để tìm các phần tử có class kết thúc bằng 'Example'
var elementsWithExampleClass = $("[class$='Example']");
// Làm việc với các phần tử đã tìm được
elementsWithExampleClass.css("color", "blue");
}
</script>
</body>
</html>
Khi sử dụng "Attribute Ends With Selector"([class$='Example']), nó chỉ khớp với class CSS kết thúc bằng 'Example', có sự phân biệt hoa thường. Trong trường hợp này, nó sẽ chọn không chọn các phần tử có class "AnotherExample" và "notEXAMPLE" vì không phù hợp hoa thường với tự cần tìm kiếm
Kết quả của việc chọn các phần tử với class kết thúc bằng 'Example' là việc đặt màu chữ của chúng thành màu xanh, như đã được xác định trong hàm search().
2.3. Attribute Ends With Selector với tên phần tử
Trong ví dụ đó, chúng ta sử dụng Attribute Ends With Selector để tìm các phần tử <div> mà có thuộc tính class kết thúc bằng chuỗi ‘example’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Ends With Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="search()">Search for elements ending with 'example'</button>
<div class="some-example">This is some example</div>
<span class="another-example">This is another example</span>
<a href="#" class="not-example">This is not an example</a>
<script>
function search() {
// Sử dụng Attribute Ends With Selector để tìm các phần tử có class kết thúc bằng 'example'
var elementsWithExampleClass = $("div[class$='example']");
// Làm việc với các phần tử đã tìm được
elementsWithExampleClass.css("font-weight", "bold");
}
</script>
</body>
</html>
Đoạn mã này nghĩa là tìm các phần tử <div> có thuộc tính class kết thúc bằng chuỗi ‘example’. Trong trường hợp này, các phần tử có class “some-example” và “another-example” thỏa mãn điều kiện này.
Khi nút “Search for elements ending with ‘example'” được nhấn, chúng sẽ được làm đậm (được thiết lập font-weight là “bold”). Các phần tử <span> và <a> không thỏa mãn điều kiện này nên không bị ảnh hưởng.
