JS - Attribute Selector
by My Love
26/04/2019, 8:33 AM | 26/04/2019, 9:08 AM | 726 | 044
Nhóm
Attribute Selector giúp lấy các thẻ thông qua thuộc tính và giá trị thuộc tính của các thẻ HTML đó. Có 9 cách lấy Attribute Selector ta tìm hiểu ở bảng dưới đây.
Danh sách Attribute Selector trong jQuery
| Cú pháp |
Ý nghĩa |
| $('[name|="value"]') |
Lấy các thẻ có thuộc tính name và giá trị của name phải bằng chuỗi value hoặc theo sau là dấu gạch ngang (-) |
| $('[name*="value"]') |
Lấy các thẻ có thuộc tính name và giá trị của name có tồn tại chuỗi value
Ví dụ :Cho 2 thẻ có thuộc tính lần lượt là name="chelseafc" và name="chelsea champion"
$('[name*="chelsea"]') sẽ lấy được cả hai thẻ này |
| $('[name~="value"]') |
Lấy các thẻ có thuộc tính name và giá trị của name có tồn tại một từ value riêng biệt.
Ví dụ :Cho 2 thẻ có thuộc tính lần lượt là name="chelseafc" và name="chelsea champion"
$('[name~="chelsea"]') sẽ lấy được thẻ thứ 2 mà không lấy được thẻ đầu tiên |
| $('[name$="value"]') |
Lấy các thẻ có thuộc tính name và giá trị của name kết thúc bằng chuỗi value |
| $('[name="value"]') |
Lấy các thẻ có thuộc tính name và giá trị của name bằng bằng chuỗi value |
| $('[name!="value"]') |
Lấy các thẻ có thuộc tính name và giá trị của name khác chuỗi value |
| $('[name]') |
Lấy các thẻ mà chỉ cần có thuộc tính name không quan tâm đến giá trị |
| $('[name^="value"]') |
Lấy các thẻ mà có thuộc tính name bắt đầu bằng chuỗi value |
| $('[name1="value1"][name2="value2"]') |
Lấy các thẻ theo nhiều thuộc tính khác nhau |
Một số ví dụ
Lấy các thẻ có thuộc tính name và giá trị của name phải bằng chuỗi value hoặc theo sau là dấu gạch ngang (-)
<html>
<head>
<script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$( "input[name|='chelsea']" ).val( "OK!" );
});
</script>
</head>
<body>
<input name="chelsea">
<input name="chelseafc">
<input name="chelsea champion">
<input name="chelsea-fc">
</body>
</html>
Kết hợp nhiều thuộc tính
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$( "input[id='01'][name^='chelsea']" ).val( "OK!" );
});
</script>
</head>
<body>
<input name="chelsea">
<input name="chelseafc">
<input id="01" name="chelsea champion">
<input name="chelsea-fc"><br/>
</body>
</html>
Các ví dụ khác khá đơn giản các bạn có thể tự code nhé, bạn có thể xem chi tiết ví dụ tại https://api.jquery.com