Định nghĩa và sử dụng
Bộ chọn [bộ chọn thuộc tính 1][bộ chọn thuộc tính n]: chọn nhiều các thành phần với từng bộ chọn cụ thể, bộ chọn thuộc tính có thể là:
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
$('[bộ chọn thuộc tính 1][bộ chọn thuộc tính n]')
$('tag[bộ chọn thuộc tính 1][bộ chọn thuộc tính n]')
Ví dụ
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div[id][title="Việt_Nam"]').css('border','1px solid red');
});
</script>
</head>
<body>
<div>div</div>
<div title="Việt_Nam">div có thuộc tính title với giá trị Việt_Nam</div>
<div title="Không_phải_Việt_Nam">div có thuộc tính title với giá trị Không_phải_Việt_Nam</div>
<div id="test" title="Việt_Nam">div có thuộc tính title với giá trị Việt_Nam, có id</div>
</body>
</html>
Hiển thị trình duyệt:
$('div[id][title="Việt_Nam"]'): giúp chọn thành phần có thuộc tính id, và thuộc tính title="Việt_Nam".
Ví dụ
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div[class="xe_hoi"][name$="vi"]').css('border','1px solid red');
});
</script>
</head>
<body>
<div class="xe_dap">Xe dap</div>
<div name="vi_HCM">div có thuộc tính name với giá trị vi ở vị trí đầu</div>
<div name="vi">div có thuộc tính name với giá trị vi</div>
<div class="xe_hoi" name="world-vi">div có thuộc tính name với giá trị vi ở vị trí cuối</div>
</body>
</html>
Hiển thị trình duyệt:
$('div[class="xe_hoi"][name$="vi"]'): chọn thành phần có class="xe_hoi", và có thuộc tính name có giá trị vi ở cuối.