selector trong jquery

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

Trang 1

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

Trang 2

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:

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

Trang 3

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

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

Trang 4

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

Trang 5

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ớimyname

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

Trang 6

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

Trang 7

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

Trang 8

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>

Định dạng
Số trang	8
Dung lượng	276,41 KB