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

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"

SelectorVí 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

Code Dev

144 Blog posts

Comments