Chức năng quan trọng nhất của jQuery được cung cấp bởi nó là Selectors . Hướng dẫn này sẽ giải thích Bộ chọn jQuery với các ví dụ đơn giản về cả ba bộ chọn tiêu chuẩn.
Bộ chọn jQuery
Selectors được sử dụng để chọn (các) phần tử HTML từ tài liệu HTML. Giả sử một tài liệu HTML được cung cấp và bạn cần chọn tất cả <div> từ tài liệu này. Đây là nơi Bộ chọn jQuery sẽ trợ giúp.
Bộ chọn jQuery có thể tìm thấy các phần tử HTML (ví dụ: Chọn các phần tử HTML) dựa trên những điều sau:
- Tên phần tử HTML
- ID phần tử
- lớp phần tử
- Tên thuộc tính phần tử
- Giá trị thuộc tính phần tử
- Nhiều tiêu chí khác
Thư viện jQuery khai thác sức mạnh của bộ chọn Cascading Style Sheets (CSS) để cho phép chúng ta truy cập nhanh chóng và dễ dàng các phần tử hoặc nhóm phần tử trong Mô hình Đối tượng Tài liệu (DOM).
Bộ chọn jQuery hoạt động theo cách rất giống trên tài liệu HTML giống như Câu lệnh chọn SQL hoạt động trên Cơ sở dữ liệu để chọn bản ghi.
Cú pháp bộ chọn jQuery
Sau đây là Cú pháp bộ chọn jQuery để chọn các phần tử HTML:
$(document).ready(function(){
$(selector)
});
Bộ chọn jQuery bắt đầu bằng ký hiệu đô la $ và sau đó chúng tôi đặt bộ chọn bên trong dấu ngoặc nhọn () . Ở đây $() được gọi là hàm xuất xưởng , sử dụng ba khối xây dựng sau trong khi chọn các phần tử trong một tài liệu nhất định:
| Tên bộ chọn | Sự miêu tả |
|---|---|
| Bộ chọn phần tử | Đại diện cho một tên phần tử HTML có sẵn trong DOM. Ví dụ $(‘p’) chọn tất cả các đoạn <p> trong tài liệu. |
| Bộ chọn #id | Đại diện cho một phần tử HTML có sẵn với ID đã cho trong DOM. Ví dụ: $(‘#some-id’) chọn một phần tử trong tài liệu có some-id làm Id phần tử. |
| Bộ chọn .class | Đại diện cho một phần tử HTML có sẵn với lớp đã cho trong DOM. Ví dụ: $(‘.some-class’) chọn tất cả các phần tử trong tài liệu có lớp là some-class . |
Tất cả các bộ chọn ở trên có thể được sử dụng riêng hoặc kết hợp với các bộ chọn khác. Tất cả các bộ chọn jQuery đều dựa trên cùng một nguyên tắc ngoại trừ một số điều chỉnh.
Bộ chọn phần tử
Bộ chọn phần tử jQuery chọn (các) phần tử HTML dựa trên tên phần tử. Sau đây là cú pháp đơn giản của bộ chọn phần tử:
$(document).ready(function(){
$("Html Element Name")
});
Xin lưu ý rằng khi sử dụng tên phần tử làm Bộ chọn jQuery, chúng tôi sẽ không cung cấp các dấu ngoặc nhọn cùng với phần tử. Ví dụ: chúng tôi chỉ đưa ra p đơn giản thay vì <p> .
ví dụ
Sau đây là một ví dụ để chọn tất cả các phần tử <p> từ một tài liệu HTML và sau đó thay đổi màu nền của các đoạn đó. Bạn sẽ không thấy bất kỳ phần tử <p> nào trong đầu ra do ví dụ này tạo ra:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery element Selector</h1>
<p>This is p tag</p>
<span>This is span tag</span>
<div>This is div tag</div>
</body>
</html>
Bộ chọn #id
Bộ chọn #id của jQuery chọn một phần tử HTML dựa trên thuộc tính id phần tử . Sau đây là cú pháp đơn giản của bộ chọn #id :
$(document).ready(function(){
$("#id of the element")
});
Để sử dụng bộ chọn #id của jQuery , bạn cần đảm bảo rằng thuộc tính id phải được gán duy nhất cho tất cả các phần tử DOM. Nếu các phần tử của bạn có id tương tự thì nó sẽ không tạo ra kết quả chính xác.
ví dụ
Sau đây là một ví dụ để chọn phần tử <p> có id là foo và thay đổi màu nền của các đoạn đó:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$("#foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery #id Selector</h1>
<p id="foo">This is foo p tag</p>
<span id="bar">This is bar span tag</span>
<div id="bill">This is bill div tag</div>
</body>
</html>
Bộ chọn .class
Bộ chọn .class của jQuery chọn (các) phần tử HTML dựa trên thuộc tính lớp phần tử . Sau đây là cú pháp đơn giản của bộ chọn .class :
$(document).ready(function(){
$(".class of the element")
});
Vì một lớp có thể được gán cho nhiều phần tử HTML trong một tài liệu HTML, nên rất có thể tìm ra nhiều phần tử chỉ với một câu lệnh bộ chọn .class .
ví dụ
Sau đây là một ví dụ để chọn tất cả các phần tử có lớp là foo và thay đổi màu nền của các phần tử đó:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(document).ready(function() {
$(".foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>jQuery .class Selector</h1>
<p class="foo">This is foo p tag</p>
<p class="foo">This is one more foo p tag</p>
<span class="bar">This is bar span tag</span>
<div class="bill">This is bill div tag</div>
</body>
</html>
Khi học về jQuery, thì Selectors là kiến thức cơ bản nhất cần nắm vửng. Nếu không, bạn sẽ không thể dùng được hiệu quả jQuery
