18/08/2018, 10:47
Bài 03: jQuery Selectors
jQuery Selectors là gì? jQuery Selectors là một trong những phần quan trọng nhất của thư viện jQuery. jQuery Selectors được dùng để chọn các phần tử HTML mà bạn muốn thao tác dựa trên id, class, thuộc tính, giá trị thuộc tính, quan hệ giữa các phần tử.... Cú pháp Để chọn một phần tử ...
jQuery Selectors là gì?
jQuery Selectors là một trong những phần quan trọng nhất của thư viện jQuery.
jQuery Selectors được dùng để chọn các phần tử HTML mà bạn muốn thao tác dựa trên id, class, thuộc tính, giá trị thuộc tính, quan hệ giữa các phần tử....
Cú pháp
Để chọn một phần tử HTML chúng ta sử dụng cú pháp
$(selector)
Ví dụ 1
Đoạn mã dưới đây chọn tất cả các phần tử <p>
$("p")
Ví dụ 2
Đoạn mã dưới đây chọn tất cả các phần tử có class là abc
$(".abc")
Ví dụ 3
Đoạn mã dưới đây chọn tất cả các phần tử <div> có class là abc
$("div.abc")
Ví dụ 4
Đoạn mã dưới đây chọn phần tử có id là abc rồi ẩn đó đi
$("#abc").hide();
Xem ví dụ
Tham khảo tất cả các bộ chọn (Selectors) trong jQuery
Dưới đây là một bảng tổng hợp các bộ chọn (Selectors) trong jQuery, bạn có thể tìm hiểu chi tiết của bộ chọn đó bằng cách bấm nào "Xem chi tiết"
| Selector | Ví dụ | Mô tả | Xem chi tiết |
|---|---|---|---|
| * |
Xem chi tiết
|
||
| #id |
Xem chi tiết
|
||
| .class |
Xem chi tiết
|
||
| .class,.class |
Xem chi tiết
|
||
| element |
Xem chi tiết
|
||
| el1,el2,el3 |
Xem chi tiết
|
||
| :first |
Xem chi tiết
|
||
| :last |
Xem chi tiết
|
||
| :even |
Xem chi tiết
|
||
| :odd |
Xem chi tiết
|
||
| :first-child |
Xem chi tiết
|
||
| :first-of-type |
Xem chi tiết
|
||
| :last-child |
Xem chi tiết
|
||
| :last-of-type |
Xem chi tiết
|
||
| :nth-child(n) |
Xem chi tiết
|
||
| :nth-last-child(n) |
Xem chi tiết
|
||
| :nth-of-type(n) |
Xem chi tiết
|
||
| :nth-last-of-type(n) |
Xem chi tiết
|
||
| :only-child |
Xem chi tiết
|
||
| :only-of-type |
Xem chi tiết
|
||
| parent > child |
Xem chi tiết
|
||
| parent descendant |
Xem chi tiết
|
||
| element + next |
Xem chi tiết
|
||
| element ~ siblings |
Xem chi tiết
|
||
| :eq(index) |
Xem chi tiết
|
||
| :gt(no) |
Xem chi tiết
|
||
| :lt(no) |
Xem chi tiết
|
||
| :not(selector) |
Xem chi tiết
|
||
| :header |
Xem chi tiết
|
||
| :animated |
Xem chi tiết
|
||
| :focus |
Xem chi tiết
|
||
| :contains(text) |
Xem chi tiết
|
||
| :has(selector) |
Xem chi tiết
|
||
| :empty |
Xem chi tiết
|
||
| :parent |
Xem chi tiết
|
||
| :hidden |
Xem chi tiết
|
||
| :visible |
Xem chi tiết
|
||
| :root |
Xem chi tiết
|
||
| :lang(language) |
Xem chi tiết
|
||
| [attribute] |
Xem chi tiết
|
||
| [attribute=value] |
Xem chi tiết
|
||
| [attribute!=value] |
Xem chi tiết
|
||
| [attribute$=value] |
Xem chi tiết
|
||
| [attribute|=value] |
Xem chi tiết
|
||
| [attribute^=value] |
Xem chi tiết
|
||
| [attribute~=value] |
Xem chi tiết
|
||
| [attribute*=value] |
Xem chi tiết
|
||
| :input |
Xem chi tiết
|
||
| :text |
Xem chi tiết
|
||
| :password |
Xem chi tiết
|
||
| :radio |
Xem chi tiết
|
||
| :checkbox |
Xem chi tiết
|
||
| :submit |
Xem chi tiết
|
||
| :reset |
Xem chi tiết
|
||
| :button |
Xem chi tiết
|
||
| :image |
Xem chi tiết
|
||
| :file |
Xem chi tiết
|
||
| :enabled |
Xem chi tiết
|
||
| :disabled |
Xem chi tiết
|
||
| :selected |
Xem chi tiết
|
||
| :checked |
Xem chi tiết
|
