03/08/2018, 10:10

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 các thẻ HTML, bởi vì các gí trị ID hay CLASS cũng chính là các thuộc tính ...

Bản chất mọi truy vấn selector của jQuery thường dựa vào attributes của các 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 đó là trong một trang 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 dựa vào ID và CLASS.

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.

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

Class Selector (“.class”)

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

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

Element Selector (“element”)

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

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

ID Selector (“#id”)

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

Demo RUN
$('#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.

Demo RUN
$('#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à Class.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

0