Thư viện jQuery khai thác sức mạnh của các CSS (Cascading Style Sheets) Selector để giúp chúng ta truy cập nhanh và dễ dàng hơn tới các phần tử hoặc nhóm các phần tử trong DOM.
Một jQuery Selector là một hàm mà sử dụng các Expression để tìm ra sự so khớp của các phần tử từ một DOM trên cơ sở tiêu chuẩn đã cho. Theo cách đơn giản, bạn có thể nói rằng, Selector được sử dụng để chọn một hoặc nhiều phần tử HTML bởi sử dụng jQuery. Khi một phần tử được chọn, thì chúng ta có thể thực hiện các hoạt động đa dạng trên phần tử đã chọn đó.
Hàm cơ sở $() trong jQuery
Factory Function có thể dịch là hàm cơ sở bởi vì đối với tôi, nó là nơi mọi thứ được tạo ra. jQuery Selector bắt đầu với ký hiệu đô la và cặp dấu ngoặc đơn $(). Hàm cơ sở $() sử dụng ba khối trong khi chọn các phần tử trong một tài liệu đã cho.
| STT | Selector & Miêu tả |
|---|---|
| 1 | Tag NameBiểu diễn một tên thẻ có sẵn trong DOM. Ví dụ: $('p') chọn tất cả đoạn văn trong phần tử. |
| 2 | Tag IDBiểu diễn một tên thẻ có sẵn với ID đã cho trong DOM. Ví dụ $('#some-id') chọn tất cả phần tử đơn trong tài liệu mà có một ID là some-id |
| 3 | Tag ClassBiểu diễn một thẻ 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 mà có một lớp là some-class. |
Tất cả các mục trên có thể được sử dụng hoặc trên chính nó hoặc trong sự kết hợp với Selector khác. Tất cả jQuery Selector xây dựng trên cùng qui tắc ngoại trừ một số "mẹo" (Tweaking).
Ghi chú − Hàm cơ sở $() là đồng nghĩa với một hàm jQuery(). Vì thế trong trường hợp bạn đang sử dụng bất kỳ thư viện JavaScirpt nào khác thì có thể xuất hiện xung đột ở đây, khi đó bạn có thể đổi ký hiệu $ thành jQuery và bạn có thể sử dụng hàm jQuery() thay cho hàm $().
Ví dụ
Sau đây là ví dụ đơn giản sử dụng Tag Selecor. Nó sẽ chọn tất cả phần tử vởi tên thẻ p và sẽ thiết lập màu nền thành "yellow".
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class="myclass">This is a paragraph.</p>
<p id="myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>Nó sẽ cho kết quả sau:
This is a paragraph.
This is second paragraph.
This is third paragraph.Cách sử dụng các Selector trong jQuery?
Selector là rất hữu ích và sẽ cần yêu cầu ở mọi bước trong khi sử dụng jQuery. Chúng nhận phần tử chính xác khi bạn muốn từ tài liệu HTML của bạn.
Bảng sau liệt kê các Selector cơ bản và giải thích về chúng bởi các ví dụ khi bạn click và link tương ứng:
| STT | Selector & Miêu tả |
|---|---|
| 1 | NameChọn tất cả phần tử mà so khớp với phần tử có Name đã cho. |
| 2 | #IDChọn một phần tử đơn mà so khớp với ID đã cho. |
| 3 | .ClassChọn tất cả phần tử mà so khớp với Class đã cho. |
| 4 | Universal (*)Chọn tất cả phần tử có sẵn trong một DOM. |
| 5 | Multiple Elements E, F, GChọn các kết quả được tổ hợp từ tất cả các bộ chọn E, F hoặc G đã cho.. |
Ví dụ về Selector trong jQuery
Tương tự với các cú pháp và ví dụ trên, các ví dụ sau sẽ giúp bạn hiểu thêm về các loại khác nhau của các Selector hữu ích khác.
| STT | Selector & Miêu tả |
|---|---|
| 1 | $('*')Selector này chọn tất cả phần tử trong tài liệu |
| 2 | $("p > *")Selector này chọn tất cả phần tử mà là con của một phần tử đoạn văn |
| 3 | $("#specialID")Hàm Selector này nhận phần tử với id= "specialID" |
| 4 | $(".specialClass")Selector này nhận tất cả các phần tử mà có class là specialClass. |
| 5 | $("li:not(.myclass)")Chọn tất cả phần tử được so khớp bởi thẻ < li > mà không có class="myclass". |
| 6 | $("a#specialID.specialClass")Selector này so khớp liên kết với một id là specialID và một class là specialClass. |
| 7 | $("p a.specialClass")Selector này so khớp liên kết với một class là specialClass được khai báo trong phần tử . |
| 8 | $("ul li:first")Selector này chỉ nhận phần tử < li > đầu tiên của phần tử
|
| 9 | $("#container p")Chọn tất cả phần tử được so khớp bởi < p > mà là con của một phần tử có một id là container. |
| 10 | $("li > ul")Chọn tất cả phần tử được so khớp bởi < ul > mà là con của một phần tử < li > được so khớp. |
| 11 | $("strong + em")Chọn tất cả phần tử được so khớp bởi < em > mà theo ngay sau một phần tử anh được so khớp bởi . |
| 12 | $("p ~ ul")Chọn tất cả phần tử được so khớp bởi < ul > mà theo sau một phần tử anh được so khớp bởi . |
| 13 | $("code, em, strong")Chọn tất cả phần tử được so khớp bởi < code > or < em > hoặc < strong >. |
| 14 | $("p strong, .myclass")Chọn tất cả phần tử được so khớp bởi < strong > mà là con của một phần tử được so khớp bởi < p > cũng như tất cả các phần tử mà có một class là myclass. |
| 15 | $(":empty")Chọn tất cả các phần tử mà không có phần tử con. |
| 16 | $("p:empty")Chọn tất cả phần tử được so khớp bởi < p > mà không có phần tử con |
| 17 | $("div[p]")Chọn tất cả phần tử được so khớp bởi < div > mà chứa một phần tử được so khớp bởi < p >. |
| 18 | $("p[.myclass]")Chọn tất cả phần tử được so khớp bởi < p > mà chứa một phần tử với một class là myclass. |
| 19 | $("a[@rel]")Chọn tất cả phần tử được so khớp bởi < a > mà có một thuộc tính rel. |
| 20 | $("input[@name=myname]")Chọn tất cả phần tử được so khớp bởi < input > mà có một giá trị name chính xác tương đương với myname. |
| 21 | $("input[@name^=myname]")Chọn tất cả phần tử được so khớp bởi < input > mà có một giá trị tên bắt đầu với myname. |
| 22 | $("a[@rel$=self]")Chọn tất cả phần tử được so khớp bởi < a > mà có giá trị thuộc tính rel kết thúc là self. |
| 23 | $("a[@href*=domain.com]")Chọn tất cả phần tử được so khớp bởi < a > mà có một giá trị href chứa domain.com. |
| 24 | $("li:even")Chọn tất cả phần tử được so khớp bởi < li > mà có một giá trị chỉ mục even. |
| 25 | $("tr:odd")Chọn tất cả phần tử được so khớp bởi < tr > mà có một giá trị chỉ mục odd |
| 26 | $("li:first")Chọn phần tử < li > đầu tiên. |
| 27 | $("li:last")Chọn phần tử < li > cuối cùng. |
| 28 | $("li:visible")Chọn tất cả phần tử được so khớp bởi < li > mà là visible (nhìn thấy). |
| 29 | $("li:hidden")Chọn tất cả phần tử được so khớp bởi < li > mà là hidden (ẩn). |
| 30 | $(":radio")Chọn tất cả nút radio trong Form |
| 31 | $(":checked")Chọn tất cả hộp thoại checked trong Form |
| 32 | $(":input")Chỉ chọn các phần tử form (input, select, textarea, button). |
| 33 | $(":text")Chỉ chọn các phần tử text (input[type=text]). |
| 34 | $("li:eq(2)")Chọn phần tử < li > thứ ba. |
| 35 | $("li:eq(4)")Chọn phần tử < li > thứ năm. |
| 36 | $("li:lt(2)")Chọn tất cả phần tử được so khớp bởi < li > ở trước phần tử thứ hai; nói cách khác, chọn hai phần tử < li > đầu tiên. |
| 37 | $("p:lt(3)")Chọn tất cả phần tử được so khớp bởi < p > ở trước phần tử thứ tư; nói cách khác, chọn ba phần tử đầu tiên. |
| 38 | $("li:gt(1)")Chọn tất cả phần tử được so khớp bởi < li > sau phần tử thứ hai. |
| 39 | $("p:gt(2)")Chọn tất cả phần tử được so khớp bởi < p > sau phần tử thứ ba. |
| 40 | $("div/p")Chọn tất cả phần tử được so khớp bởi < p > mà là con của một phần tử được so khớp bởi . |
| 41 | $("div//code")Chọn tất cả phần tử được so khớp bởi < code > mà là con của một phần tử được so khớp bởi . |
| 42 | $("//p//a")Chọn tất cả phần tử được so khớp bởi < a > mà là con của một phần tử được so khớp bởi |
| 43 | $("li:first-child")Chọn tất cả phần tử được so khớp bởi < li > mà là con đầu tiên của phần tử cha. |
| 44 | $("li:last-child")Chọn tất cả phần tử được so khớp bởi < li > mà là con cuối cùng của phần tử cha. |
| 45 | $(":parent")Chọn tất cả phần tử mà là cha của phần tử khác, bao gồm text. |
| 46 | $("li:contains(second)")Chọn tất cả phần tử được so khớp bởi < li > mà chứa văn bản là second. |
Bạn có thể sử dụng tất cả các Selector trên với bất kỳ phần tử HTML/XML nào theo cách chung. Ví dụ, nếu Selector $("li:first") làm việc cho phần tử < li > thì khi đó, $("p:first") sẽ cũng làm việc cho phần tử < p >.
