Selector trong jQuery
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 Name
Biể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 ID
Biể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 Class
Biể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:
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 |
Name
Chọn tất cả phần tử mà so khớp với phần tử có Name đã cho. |
| 2 | #ID
Chọn một phần tử đơn mà so khớp với ID đã cho. |
| 3 | .Class
Chọ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, G
Chọ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ử <p>. |
| 8 | $("ul li:first")
Selector này chỉ nhận phần tử <li> đầu tiên của phần tử <ul>. |
| 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 <strong>. |
| 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 <p>. |
| 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ử <p> đầ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 <div>. |
| 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 <div>. |
| 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 <p> |
| 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>.
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt qua các dự án trên trường và đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.
Nội dung khóa học gồm 16 chuơng và 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/ Bạn nào có nhu cầu mua, inbox trực tiếp a Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack
Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học jQuery khác tại VietJack:
