Các biểu thức chọn trong jQuery theo dạng CSS selector

jQuery thực sự mạnh mẽ thật đúng với slogan "write less, do more", nó là một thư viện JavaScript rất giễ ràng sử dụng nó giúp các nhà thiết kế và phát triển web thêm các các phần tử có sự tương tác và có tính năng động về phía người dùng. Nếu trước kia bạn viết JavaScript mà không sử dụng thư viện thì sẽ rất dài vì bạn phải tự xây dựng thêm các hàm để chọn rồi sử lý phần tử bây giờ mọi thứ trở nên đơn giản và ngắn gọn như bạn viết CSS vậy. Bài viết này sẽ giới thiệu về các biểu thức chọn trong jQuery theo dạng CSS selector.

Element

Để chọn theo tên thẻ sử dụng cú pháp $('tên thẻ')

ID: #myid

Chọn theo tên id của phần tử sử dụng cú pháp $('tên id')

Class: .myclass

Chọn theo tên class của phần tử sử dụng cú pháp $('.tên class'). Có một điều nên chú ý rằng trong cấu trúc hồ sơ của bạn thì class thường được dùng cho nhiều phần tử nên kết quả biểu thức chọn này thường trả về một mảng phần tử.

Descendant: E F

Chọn theo con cháu ví dụ chọn phần tử img là hậu duệ của phần tử a sẽ có cú pháp $('a img')

Child: E > F

Chọn theo thẻ con trực tiếp cú pháp $('tên thẻ > tên thẻ'). Phương pháp chon theo CSS này được hổ trợ trên hầu hết các trình duyệt hiện đại và không hổ trợ trên trình duyệt IE từ phiên bản 6 về trước

Adjacent Sibling: E + F

Chọn những thẻ có cùng phần tử cha và nằm kế nhau tức chúng là anh em của nhau, cú pháp $('tên thẻ + tên thẻ')

General Sibling: E ~ F

Chọn những phần tử F cùng cấp với phần tử E, cú pháp $('tên thẻ ~ tên thẻ')

Multiple Elements: E,F,G

Chọn nhiều phần tử cùng lúc, cú pháp $('tên thẻ, tên thẻ,...')

Nth Child (:nth-child(n))

Chọn phần tử con theo thứ tự chỉ mục n, ở đây nth-child(n) sẽ đánh số từ 1 và đánh chỉ mục với tất cả các thẻ con, trong khi đó nth(n) sẽ đánh số từ 0 và chỉ đánh chỉ mục theo phần tử bạn chọn. Ngoài ra bạn có thể thay n bằng từ khóa even để chọn những phần tử con chẵn hoặc odd để chọn những phần tử con lẻ.

First Child (:first-child)

Chọn phần tử con đầu tiên, cú pháp $('tên thẻ:first-child')

Last Child (:last-child)

Chọn phần tử con cuối cùng, cú pháp $('tên thẻ:last-child')

Only Child :only-child

Chọn tất cả những phần tử chỉ là con, cú pháp $('tên thẻ:only-child')

Not :not(s)

Chọn theo dạng phủ định. Ví dụ

• $('li:not(.myclass)') Chọn những phần tử li nào không có class tên myclass
• $('li:not(:last-child)') Chọn những phần tử  li nào không phải là phần tử con cuối cùng

Empty :empty

Chọn những phần tử nào rỗng tức là nó không có con cháu, cú pháp $('phần tử:empty') hoặc $(':empty')

Universal: *

Dấu * sử dụng trong thẻ chọn đại diện cho tất cả các phần tử

Trong những bài viết tiếp theo sẽ giới thiệu về những phương pháp chọn phần tử tiếp theo.

Tham khảo (jQuery Reference Guide and docs.jquery.com)