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".


   
      The jQuery Example
      

      
   
	
   
      
         This is a paragraph.
         This is second paragraph.
         This is third paragraph.

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.

mà có một giá trị chỉ mục odd

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ẻ 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ử đầ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 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 mà là con của một phần tử được so khớp.
11	$("strong + em") Chọn tất cả phần tử được so khớp bởi 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 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 `or hoặc .`
14	$("p strong, .myclass") Chọn tất cả phần tử được so khớp bởi mà là con của một phần tử được so khớp bởi *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 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 mà chứa một phần tử được so khớp bởi .
18	$("p[.myclass]") Chọn tất cả phần tử được so khớp bởi 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 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 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 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 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 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 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
26	$("li:first") Chọn phần tử đầu tiên.
27	$("li:last") Chọn phần tử cuối cùng.
28	$("li:visible") Chọn tất cả phần tử được so khớp bởi mà là visible (nhìn thấy).
29	$("li:hidden") Chọn tất cả phần tử được so khớp bởi 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ử thứ ba.
35	$("li:eq(4)") Chọn phần tử thứ năm.
36	$("li:lt(2)") Chọn tất cả phần tử được so khớp bởi ở trước phần tử thứ hai; nói cách khác, chọn hai phần tử đầu tiên.
37	$("p:lt(3)") Chọn tất cả phần tử được so khớp bởi ở 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 sau phần tử thứ hai.
39	$("p:gt(2)") Chọn tất cả phần tử được so khớp bởi sau phần tử thứ ba.
40	$("div/p") Chọn tất cả phần tử được so khớp bởi 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 `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 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 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 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 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ử

thì khi đó, $("p:first") sẽ cũng làm việc cho phần tử

Các bài học jQuery khác tại VietJack:

Trang trước

Trang sau