jQuery Selectors - Attributes - jQuery căn bản

Ở 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.

Bắt đầu bằng chữ Zaidap.com:

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

XEM DEMO

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

Chỉ cần xuất hiện chữ Zaidap.com:

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

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

Xuất hiện từ Zaidap.com:

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

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

Chuỗi ký tự cuối cùng là Zaidap.com:

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

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

Giá trị đúng bằng Zaidap.com:

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

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

Giá trị không bằng Zaidap.com:

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

$('a[title!="Zaidap.com"]').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à Zaidap.com.

XEM DEMO

$('a[name][title="Zaidap.com"]').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é.