Bài 05: jQuery Selectors - Based On jQuery

Bản chất mọi truy vấn Selector của jQuery thường dựa vào Attributes của thẻ HTML bởi vì các gí trị ID hay CLASS cũng chính là các thuộc tính nhưng nó có tính chắc đặc biệt hơn chút xíu đó là trong tài liệu HTML thì ID là duy nhất còn CLASS thì có thể có nhiều. Và trong bài này chúng ta sẽ tìm hiểu một số cách truy vấn Selector thông dụng nhất khi sử dụng jQuery.

1. Danh sách các Selector thông dụng

Dưới đây là danh sách những selector thông dụng được sử dụng rất nhiều trong các ứng dụng viết bằng jQuery. Vì tính thông dụng của nó nên tôi sẽ tổng hợp nó trong một bài duy nhất này nhằm giúp các bạn dễ tìm kiếm tài liệu hơn.

STT Cú pháp Ý nghĩa
1 $('*') Chọn tất cả các thẻ HTML
2 $('.class-name') Chọn thẻ HTML có class class-name
3 $('element') Chọn tất cả thẻ có tên là element, ví dụ $('a') tức là chọn tất cả thẻ a
4 $('#id-name') Chọn thẻ có id là id-name
5 $('#id-name, .class-name') Chọn thẻ có id là id-name hoặc có class là class-name. Đây là truy vấn dựa vào nhiều dâu hiệu cách nhau bởi dấu phẩy

2. Các ví dụ về cách sử dụng

Sau đây là một số ví dụ cách sử dụng các Selector thông dụng trong jQuery mà bạn nên biết.

All Selector (“*”):

Thêm class selected cho tất cả thẻ HTML.

XEM DEMO

$('*').addClass('selected');

Class Selector (“.class”):

Thêm class selected vào tất cả thẻ HTML có class là freetuts.

XEM DEMO

$('.freetuts').addClass('selected');

Element Selector (“element”):

Thêm class selected vào tất cả thẻ a.

XEM DEMO

$('a').addClass('selected');

ID Selector (“#id”):

Thêm class selected vào thẻ có id là freetuts.

XEM DEMO

$('#freetuts').addClass('selected');

Multiple Selector (“selector1, selector2, selectorN”):

Thêm class selected vào thẻ có id là freetuts hoặc có class là freetuts.

XEM DEMO

$('#freetuts, .freetuts').addClass('selected');

3. Tổng kết

Trên là 5 loại selector thường được sử dụng trong jQuery mà bạn nên biết. Trong 5 loại đó thì Selector theo ID hoặc Class là thường được lựa chọn bởi vì cấu trúc HTML trong thực tế đa số người ta sử dụng ID và Classs.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.