Attribute Contains Word 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à thuộc tính có giá trị chứa một từ cụ thể, được phân tách bởi khoảng trắng.
Trong ngữ cảnh của Attribute Contains Word Selector trong CSS và thư viện jQuery, một “word” được định nghĩa là một chuỗi ký tự không chứa khoảng trắng hoặc ký tự phân tách. Khi sử dụng Attribute Contains Word Selector, từ khóa được tìm kiếm phải xuất hiện như một “word” độc lập và không nằm trong một từ khác.
Ví dụ:
- Trong chuỗi “example word”, “example” và “word” được coi là hai “words” riêng biệt.
- Trong chuỗi “example-word”, “example-word” được xem như một “word” duy nhất.
- Trong chuỗi “exampleword”, “exampleword” được xem như một “word” duy nhất.
1. Cú pháp
Attribute Contains Word Selector [name~="value"] trong thư viện jQuery là sensitive, nghĩa là nó phân biệt chữ hoa và chữ thường trong quá trình tìm kiếm.
Cú pháp:
$("[attribute~='value']")
Hoặc
jQuery("[attribute~='value']")
attribute: Tên thuộc tính mà bạn muốn chọn.value: Từ cần tìm kiếm trong giá trị thuộc tính.
Phiên bản hỗ trợ:
- Selector này được giới thiệu từ phiên bản 1.0 của thư viện jQuery.
Đặc điểm:
- Selector này phù hợp khi bạn muốn chọn các phần tử mà giá trị của thuộc tính chứa một từ xác định.
- Nó tìm kiếm từng từ trong giá trị thuộc tính, nếu từ cần tìm trùng khớp với bất kỳ từ nào, phần tử sẽ được chọn.
2. Các ví dụ minh họa
2.1. Attribute Contains Word Selector tìm theo từ
Ví dụ bạn đưa ra là một trang web HTML đơn giản mô tả việc sử dụng Attribute Contains Word Selector của jQuery để tìm các phần tử với class chứa từ “example”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Contains Word Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="example-class">Element with class "example-class"</div>
<div class="exampleclass">Element with class "exampleclass"</div>
<div class="example class">Element with class "example class"</div>
<h5>Attribute Contains Word Selector Example</h5>
<button onclick="search()">Search for 'example'</button>
<script>
function search() {
// Sử dụng Attribute Contains Word Selector để tìm các phần tử có class chứa từ 'example'
var elementsWithExampleClass = $("[class~='example']");
// Làm việc với các phần tử đã tìm được
elementsWithExampleClass.css("font-weight", "bold");
}
</script>
</body>
</html>
Kết quả khi nhấn nút “Search for ‘example'” là tất cả các phần tử div có class chứa từ “example” sẽ được làm nổi bật bằng việc thay đổi kiểu chữ của chúng.
2.2. Attribute Contains Word Selector phân biệt hoa thường
Ví dụ trên minh họa việc sử dụng Attribute Contains Word Selector [class~='Example'] để tìm các phần tử có class chứa từ ‘Example’ để xem nó có tìm kiếm phân biệt hoa thường không.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Contains Word Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="Example Class">Element with class "Example-Class"</div>
<div class="exampleClass">Element with class "exampleClass"</div>
<div class="example class">Element with class "example class"</div>
<h5>Attribute Contains Word Selector Example</h5>
<button onclick="search()">Search for 'Example'</button>
<script>
function search() {
// Sử dụng Attribute Contains Word Selector để tìm các phần tử có class chứa từ 'Example' (không phân biệt hoa thường)
var elementsWithExampleClass = $("[class~='Example']");
// Làm việc với các phần tử đã tìm được
elementsWithExampleClass.css("font-weight", "bold");
}
</script>
</body>
</html>Khi bạn nhấn vào nút “Search for ‘Example'”, jQuery sẽ áp dụng CSS (đặt chữ in đậm) cho phần tử thỏa mãn điều kiện tìm kiếm, tức là các phần tử có class chứa từ ‘Example’ với chữ E viết hoa được tìm thấy, còn trường hợp ‘example class’ với chữ E viết thường không được tìm thấy.
2.3. Attribute Contains Word Selector kèm tên thẻ
Dưới đây là một ví dụ sử dụng “Attribute Contains Word Selector” để tìm kiếm đúng tên thẻ trong nhiều loại thẻ khác nhau có cùng một thuộc tính được tìm kiếm:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Contains Word Selector Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p data-custom="example Class">This is a paragraph with custom attribute "exampleClass".</p>
<span data-custom="example Class">This is a span with custom attribute "exampleClass".</span>
<div data-custom="example Class">This is a div with custom attribute "exampleClass".</div>
<h5>Search for elements with custom attribute containing 'exampleClass'</h5>
<button onclick="search()">Search</button>
<script>
function search() {
// Sử dụng Attribute Contains Word Selector để tìm các phần tử có thuộc tính data-custom chứa từ 'exampleClass'
var elementsWithExampleClass = $("p[data-custom~='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, chúng ta tìm kiếm các phần tử có thuộc tính data-custom chứa từ 'example Class' bằng cách sử dụng “Attribute Contains Word Selector”: p[data-custom~='example']. Khi nhấn nút “Search”, các phần tử thỏa mãn điều kiện này sẽ được tìm thấy thẻ p chứa từ example như điều kiện và được áp dụng CSS (thay đổi màu chữ thành màu xanh).
