jQuery Selectors - Attributes

Ở bài trước chúng ta đã được tìm hiểu về Selector trong jQuery và mình cũng có giới thiệu sơ lược cách truy vấn theo ID và Class rồi, nhưng thực tế còn nhiều cách truy vấn khác dựa vào các đặc điểm của thẻ HTML và CSS. Trong bài này chúng ta sẽ tìm hiểu truy vấn thông qua các thuộc tính của thẻ HTML.

1. Selector Attributes là gì?

Selector Attributes là sàn lọc thẻ HTML dựa vào tên thuộc tính và giá trị thuộc tính của các thẻ HTML đó.

Nếu bạn chưa hiểu thuộc tính của HTML là gì thì bạn xem ví dụ dưới đây:

<input type="text" name="username" value="TheHalfHeart"/>

Trong thẻ input này thì type="text", name="username" và value="TheHalfHeart" chính là các thuộc tính của thẻ input.

Và sau đây là danh sách các cách selector theo thuộc tính trong jQuery.

2. Các ví dụ Selector Attributes

Để các bạn dễ hiểu bài thì mình đưa ra ví dụ luôn và từ đó các bạn suy luận ra công thức chung nhé. Trường hợp bạn nào vẫn không hiểu thì có thể comment bên dưới và mình sẽ giải thích rõ ràng hơn.

Ví dụ: Thêm class selected vào thẻ a có thuộc tính title và giá trị của title thõa mãn các điều kiện dưới đây.

Bắt đầu bằng chữ freetuts:

Bất cứ giá trị nào bắt đầu bằng chữ freetuts là được. Ví dụ từ freetuts-ads, freetutsads đều được.

XEM DEMO

$('a[title|="freetuts"]').addClass('selected');

Chỉ cần xuất hiện chữ freetuts:

Chỉ cần tồn tại chữ freetuts trong title là được. Ví dụ từ i-love-freetuts, my-blog-freetuts-dot-net đều được.

$('a[title*="freetuts"]').addClass('selected');

Xuất hiện từ freetuts:

Từ là phải cách nhau bằng khoảng trắng, kể cả từ freetuts-demo cũng không được vì từ đó có thêm chữ -demo.

$('a[title~="freetuts"]').addClass('selected');

Chuỗi ký tự cuối cùng là freetuts:

Ví dụ chuỗi i-love-freetuts hoặc demofreetuts đều được vì nó có chuỗi cuối cùng là freetuts.

$('a[title$="freetuts"]').addClass('selected');

Giá trị đúng bằng freetuts:

Đây là so sánh bằng, nghĩa là giá trị bắt buộc phải là freetuts.

$('a[title="freetuts"]').addClass('selected');

Giá trị không bằng freetuts:

Đây là so sánh không bằng, nghĩa là giá trị khác freetuts là được. Ví dụ freetuts-ads hoặc ilovefreetuts.

$('a[title!="freetuts"]').addClass('selected');

Chỉ cần có thuộc tính title:

Chỉ cần xuất hiện thuộc tính title trong thẻ HTML là được, không quan trọng giá trị của nó là gì.

$('a[title]').addClass('selected');

3. Selector nhiều Attributes

Trường hợp bạn muốn tìm theo nhiều thuộc tính và nhiều điều kiện khác nhau thì hãy bổ sung thêm theo cú pháp ở phần 1 là được.

Ví dụ: Tìm thẻ a có thuộc tính name và có thuộc tính title và giá trị của title là freetuts.

XEM DEMO

$('a[name][title="freetuts"]').addClass('selected');

4. Lời kết

Trên là tổng tất cả các cách truy vấn selector dựa vào tên và giá trị của thuộc tính. Với các selector này bạn có thể sàn lọc bất kì một thẻ HTML nào. Vì mình không đưa ra công thức chung nên bạn dựa vào các ví dụ để suy luận ra nhé.

Nguồn: code24h.com