jQuery - Bộ chọn

Thư viện jQuery khai thác sức mạnh của các bộ chọn Cascading Style Sheets (CSS) để cho phép chúng tôi 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 là một hàm sử dụng các biểu thức để tìm ra các phần tử phù hợp từ DOM dựa trên các tiêu chí đã cho. Bạn có thể nói một cách đơn giản, bộ chọn được sử dụng để chọn một hoặc nhiều phần tử HTML bằng jQuery. Khi một phần tử được chọn thì chúng ta có thể thực hiện các thao tác khác nhau trên phần tử đã chọn đó.

Hàm nhà máy $ ()

Bộ chọn jQuery bắt đầu bằng ký hiệu đô la và dấu ngoặc đơn - $(). Chức năng nhà máy$() 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 -

Sr.No.	Bộ chọn & Mô tả
1	Tag Name Đại diện cho một tên thẻ có sẵn trong DOM. Ví dụ$('p') chọn tất cả các đoạn văn <p> trong tài liệu.
2	Tag ID Đại diện cho một thẻ có sẵn với ID đã cho trong DOM. Ví dụ$('#some-id') chọn một phần tử duy nhất trong tài liệu có ID là một số id.
3	Tag Class Đại diện cho 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 có một lớp thuộc lớp nào đó.

Tất cả các mục 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.

NOTE - Chức năng nhà máy $() là một từ đồng nghĩa của jQuery()chức năng. Vì vậy, trong trường hợp bạn đang sử dụng bất kỳ thư viện JavaScript nào khác, nơi$ dấu hiệu xung đột với một số thứ khác thì bạn có thể thay thế $ ký bởi jQuery tên và bạn có thể sử dụng chức năng jQuery() thay vì $().

Thí dụ

Sau đây là một ví dụ đơn giản sử dụng Công cụ chọn thẻ. Thao tác này sẽ chọn tất cả các phần tử có tên thẻp.

Bản thử trực tiếp

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

Điều này sẽ tạo ra kết quả sau:

Làm thế nào để sử dụng bộ chọn?

Các bộ chọn rất hữu ích và sẽ được yêu cầu ở mọi bước khi sử dụng jQuery. Họ nhận được phần tử chính xác mà bạn muốn từ tài liệu HTML của mình.

Bảng sau liệt kê một số bộ chọn cơ bản và giải thích chúng bằng các ví dụ.

Sr.No.	Bộ chọn & Mô tả
1	Tên Chọn tất cả các phần tử phù hợp với phần tử đã cho Name.
2	#TÔI Chọn một phần tử duy nhất phù hợp với phần tử đã cho ID.
3	.Lớp học Chọn tất cả các yếu tố phù hợp với Class.
4	Phổ cập (*) Chọn tất cả các phần tử có sẵn trong DOM.
5	Nhiều phần tử E, F, G Chọn kết quả tổng hợp của tất cả các bộ chọn được chỉ định E, F hoặc là G.

Ví dụ về bộ chọn

Tương tự như cú pháp và ví dụ ở trên, các ví dụ sau sẽ cung cấp cho bạn hiểu biết về cách sử dụng các loại bộ chọn hữu ích khác -

Tại đây, bạn có các loại bộ chọn hữu ích khác -

Sr.No.	Bộ chọn & Mô tả
1	*$('')** Bộ chọn này chọn tất cả các phần tử trong tài liệu.
2	*$("p > ")** Bộ chọn này chọn tất cả các phần tử là con của một phần tử đoạn văn.
3	$("#specialID") Hàm bộ chọn này nhận phần tử có id = "specialID".
4	$(".specialClass") Bộ chọn này nhận tất cả các phần tử có lớp SpecialClass .
5	$("li:not(.myclass)") Chọn tất cả các phần tử được so khớp bởi <li> không có class = "myclass".
6	$("a#specialID.specialClass") Bộ chọn này khớp các liên kết với một id là specialID và một lớp SpecialClass .
7	$("p a.specialClass") Bộ chọn này so khớp các liên kết với một lớp SpecialClass được khai báo trong các phần tử <p>.
số 8	$("ul li:first") Bộ chọn này chỉ nhận phần tử <li> đầu tiên của <ul>.
9	$("#container p") Chọn tất cả các phần tử được so khớp bởi <p> là con của một phần tử có id của vùng chứa .
10	$("li > ul") Chọn tất cả các phần tử được so khớp bởi <ul> là con của một phần tử được so khớp bởi <li>
11	$("strong + em") Chọn tất cả các phần tử được so khớp bởi <em> ngay sau phần tử anh em được so khớp bởi <strong>.
12	$("p ~ ul") Chọn tất cả các phần tử được so khớp bởi <ul> theo sau một phần tử anh em được so khớp bởi <p>.
13	$("code, em, strong") Chọn tất cả các phần tử phù hợp với <code> hoặc <em> hoặc <strong>.
14	$("p strong, .myclass") Chọn tất cả các phần tử được so khớp bởi <strong> 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ử có một lớp myclass .
15	$(":empty") Chọn tất cả các phần tử không có phần tử con.
16	$("p:empty") Chọn tất cả các phần tử được so khớp bởi <p> không có phần tử con.
17	$("div[p]") Chọn tất cả các phần tử được so khớp bởi <div> có chứa phần tử được so khớp bởi <p>.
18	$("p[.myclass]") Chọn tất cả các phần tử được so khớp bởi <p> có chứa phần tử có lớp myclass .
19	$("a[@rel]") Chọn tất cả các phần tử được so khớp bởi <a> có thuộc tính rel.
20	$("input[@name = myname]") Chọn tất cả các phần tử được so khớp bởi <input> có giá trị tên chính xác bằng tên của tôi .
21	$("input[@name^=myname]") Chọn tất cả các yếu tố kết hợp bởi <input> có giá trị tên bắt đầu với myname .
22	$("a[@rel$=self]") Chọn tất cả các phần tử được so khớp bởi <a> có relgiá trị thuộc tính kết thúc bằng self .
23	*$("a[@href=domain.com]")** Chọn tất cả các phần tử được so khớp bởi <a> có giá trị href chứa domain.com.
24	$("li:even") Chọn tất cả các phần tử được so khớp bởi <li> có giá trị chỉ mục chẵn.
25	$("tr:odd") Chọn tất cả các phần tử được so khớp bởi <tr> có giá trị chỉ số lẻ.
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ả các phần tử được so khớp bởi <li> có thể nhìn thấy.
29	$("li:hidden") Chọn tất cả các phần tử được so khớp bởi <li> bị ẩn.
30	$(":radio") Chọn tất cả các nút radio trong biểu mẫu.
31	$(":checked") Chọn tất cả hộp kiểm trong biểu mẫu.
32	$(":input") Chỉ chọn các phần tử biểu mẫu (đầu vào, chọn, vùng văn bản, nút).
33	$(":text") Chỉ chọn các phần tử văn bản (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ả các phần tử được so khớp bởi phần tử <li> trước phần tử thứ ba; nói cách khác, hai phần tử <li> đầu tiên.
37	$("p:lt(3)") chọn tất cả các phần tử được so khớp bởi các phần tử <p> trước phần tử thứ tư; nói cách khác, ba phần tử <p> đầu tiên.
38	$("li:gt(1)") Chọn tất cả cá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ả cá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ả các phần tử được so khớp bởi <p> là con của một phần tử được so khớp bởi <div>.
41	$("div//code") Chọn tất cả các phần tử được so khớp bởi <code> là con của một phần tử được so khớp bởi <div>.
42	$("//p//a") Chọn tất cả các phần tử được so khớp bởi <a> 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ả các phần tử được so khớp bởi <li> là phần tử con đầu tiên của cha mẹ chúng.
44	$("li:last-child") Chọn tất cả các phần tử được so khớp bởi <li> là con cuối cùng của cha mẹ chúng.
45	$(":parent") Chọn tất cả các phần tử là cha của một phần tử khác, bao gồm cả văn bản.
46	$("li:contains(second)") Chọn tất cả các phần tử được so khớp bởi <li> có chứa văn bản thứ hai.

Bạn có thể sử dụng tất cả các bộ chọn ở trên với bất kỳ phần tử HTML / XML nào theo cách chung chung. Ví dụ nếu bộ chọn$("li:first") hoạt động cho phần tử <li> sau đó $("p:first") cũng sẽ hoạt động cho phần tử <p>.