Bài 04: 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.

STT Cú pháp Ý nghĩa
1 $('[title|="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải bắt đầu bằng chuỗi value
2 $('[title*="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title tồn tại chuỗi value
3 $('[title~="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải xuất hiện chữ value
4 $('[title$="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title kết thúc bằng chuỗi value
5 $('[title="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải bằng value
6 $('[title!="value"]') Tìm thẻ HTML có thuộc tính title và giá trị của title phải khác value
7 $('[title]') Tìm thẻ HTML chỉ cần có thuộc tính title là được

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.

XEM DEMO

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

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

XEM DEMO

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

XEM DEMO

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

XEM DEMO

$('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ì.

XEM DEMO

$('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 theo thuộc tính của Selector, dựa vào nó 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 nên bạn dựa vào các ví dụ để suy luận ra nhé.

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.