Web Cơ Bản

Danh sách tất cả các bộ chọn (selector) trong jQuery

Bộ chọn Ví dụ Mô tả
* $("*") - Chọn tất cả các phần tử
#id $("#firstName") - Chọn phần tử có thuộc tính id với giá trị là firstName
.class $(".info") - Chọn tất cả các phần tử mà thuộc tính class của nó có chứa lớp info
selector1,selector2 $(".info,#first") - Chọn tất cả các phần tử mà thuộc tính class của nó có chứa lớp info, hoặc có thuộc tính id với giá trị là first
element $("div") - Chọn tất cả các phần tử <div>
:first $("p:first") - Chọn phần tử <p> đầu tiên
:last $("p:last") - Chọn phần tử <p> cuối cùng
:even $("p:even") - Chọn tất cả các phần tử <p> có chỉ số chẵn
:odd $("p:odd") - Chọn tất cả các phần tử <p> có chỉ số lẻ
:first-child $("p:first-child") - Chọn tất cả các phần tử <p> là phần tử con đầu tiên của cha nó
:first-of-type $("p:first-of-type") - Chọn tất cả các phần tử <p> là phần tử con có kiểu <p> đầu tiên của cha nó
:last-child $("p:last-child") - Chọn tất cả các phần tử <p> là phần tử con cuối cùng của cha nó
:last-of-type $("p:last-of-type") - Chọn tất cả các phần tử <p> là phần tử con có kiểu <p> cuối cùng của cha nó
:nth-child(n) $("p:nth-child(3)") - Chọn tất cả các phần tử <p> là phần tử con thứ ba của cha nó (theo thứ tự từ trên xuống)
:nth-last-child(n) $("p:nth-last-child(3)") - Chọn tất cả các phần tử <p> là phần tử con thứ ba của cha nó (theo thứ tự từ dưới lên)
:nth-of-type(n) $("p:nth-of-type(3)") - Chọn tất cả các phần tử <p> là phần tử con có kiểu <p> thứ ba của cha nó (theo thứ tự từ trên xuống)
:nth-last-of-type(n) $("p:nth-last-of-type(3)") - Chọn tất cả các phần tử <p> là phần tử con có kiểu <p> thứ ba của cha nó (theo thứ tự từ dưới lên)
:only-child $("p:only-child") - Chọn tất cả các phần tử <p> là phần tử con duy nhất của cha nó
:only-of-type $("p:only-child") - Chọn tất cả các phần tử <p> là phần tử con có kiểu <p> duy nhất của cha nó
parent > child $(".info > p") - Chọn tất cả các phần tử <p> là phần tử con của phần tử có lớp info
parent descendant $(".info p") - Chọn tất cả các phần tử <p> là phần tử hậu duệ (nằm bên trong) của phần tử có lớp info
element + next $(".info + p") - Chọn phần tử <p> là em liền kề (cùng cấp nằm ngay phía sau) của phần tử có lớp info
element ~ siblings $(".info ~ p") - Chọn phần tử <p> là em của phần tử có lớp info
:eq(index) $("p:eq(3)") - Chọn phần tử <p> có chỉ số là 3
:gt(index) $("p:gt(3)") - Chọn các phần tử <p> có chỉ số lớn hơn 3
:lt(index) $("p:lt(3)") - Chọn các phần tử <p> có chỉ số nhỏ hơn 3
:not(selector) $("not(.info)") - Chọn tất cả các phần tử không phải là phần tử có lớp info
:header $(":header") - Chọn tất cả các phần tử <h1> ... <h6>
:animated $(":animated") - Chọn tất cả các phần tử đang có hiệu ứng chuyển động
:focus $(":focus") - Chọn tất cả các phần tử đang được truy nhập
:contains(text) $("p:contains('hello')") - Chọn tất cả các phần tử <p> mà nội dung của nó có chứa hello
:has(selector) $("div:has(p)") - Chọn tất cả các phần tử <div> có chứa phần tử <p>
:empty $(":empty") - Chọn tất cả các phần tử có nội dung rỗng
:parent $("div:parent") - Chọn tất cả các phần tử <div> mà nội dung của nó không phải rỗng
:hidden $("p:hidden") - Chọn tất cả các phần tử <p> bị ẩn
:visible $("p:visible") - Chọn tất cả các phần tử <p> không bị ẩn
:root $(":root") - Chọn phần tử gốc trong trang web
[attribute] $("[src]") - Chọn tất cả các phần tử được thiết lập thuộc tính src
[attribute=value] $("[src='banana.png']") - Chọn tất cả các phần tử được thiết lập thuộc tính src với giá trị là banana.png
[attribute!=value] $("[src!='banana.png']") - Chọn tất cả các phần tử được thiết lập thuộc tính src với giá trị khác banana.png
[attribute$=value] $("[src$='na.png']") - Chọn tất cả các phần tử được thiết lập thuộc tính src với giá trị kết thúc bởi na.png
[attribute|=value] $("[title|='firstName']") - Chọn tất cả các phần tử được thiết lập thuộc tính title với giá trị là firstName hoặc được bắt đầu bởi firstName và theo theo là một dấu gạch nối
[attribute^=value] $("[title^='firstName']") - Chọn tất cả các phần tử được thiết lập thuộc tính title với giá trị bắt đầu bởi firstName
[attribute~=value] $("[title~='firstName']") - Chọn tất cả các phần tử được thiết lập thuộc tính title với giá trị có chứa từ firstName
[attribute*=value] $("[title*='firstName']") - Chọn tất cả các phần tử được thiết lập thuộc tính title với giá trị có chứa firstName
:input $(":input") - Chọn tất cả các phần tử <input>
:text $(":text") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là text
:password $(":password") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là password
:radio $(":radio") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là radio
:checkbox $(":checkbox") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là checkbox
:submit $(":submit") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là submit
:reset $(":reset") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là reset
:button $(":button") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là button
:image $(":image") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là image
:file $(":file") - Chọn tất cả các phần tử <input> được thiết lập thuộc tính type với giá trị là file
:disabled $(":disabled") - Chọn tất cả các phần tử được thiết lập thuộc tính disabled
:enabled $(":enabled") - Chọn tất cả các phần tử không được thiết lập thuộc tính enabled
:selected $(":selected") - Chọn tất cả các phần tử được thiết lập thuộc tính selected
:checked $(":checked") - Chọn tất cả các phần tử được thiết lập thuộc tính checked