jQuery hỗ trợ các selector cho phép chọn các phần tử theo thuộc tính như bảng sau:

Selector Mô tả
[A] Chọn tất cả các phần tử có một thuộc tính A (xem ví dụ 1)
E[A] Chọn tất cả phần tử E có một thuộc tính là A (xem ví dụ 2)
E[A=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị là V (xem ví dụ 3)
E[A^=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị bắt đầu bằng chuỗi V (xem ví dụ 4)
E[A$=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị kết thúc bằng chuỗi V hay chỉ là V(xem ví dụ 5)
E[A!=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị khác V hay không có thuộc tính A (xem ví dụ 6)
E[A*=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị chứa chuỗi V (xem ví dụ 7)
E[A|=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị là V hay V– (xem ví dụ 8)
E[A~=’V’] Chọn tất cả phần tử E có một thuộc tính là A với giá trị là V hay chứa chuỗi V cách các chuỗi khác bởi khoảng trắng (xem ví dụ 9)
E [C1][C2] Chọn tất cả phần tử E có các thuộc tính thoả C1 và C2 (xem ví dụ 10)

Xét đoạn mã HTML sau:

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>

<p id ="address">I live in Duckburg.</p>

<p>My best friend is Mickey.</p>

Who is your favourite:

<ul id="choose">

  <li>Goofy</li>

  <li>Mickey</li>

  <li>Pluto</li>

</ul>

Ví dụ 1: Chọn tất cả các phần tử có thuộc tính id và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("[id]").css("background-color", "yellow");// p thứ 2 và ul

Kết quả

Ví dụ 2:  Chọn tất cả các phần tử p có thuộc tính id và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p[id]").css("background-color", "yellow");// p thứ 2

Kết quả

Ví dụ 3: Chọn tất cả các phần tử p có thuộc tính id =“address”  và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:

$(“p[id=’address’]”).css(“background-color”, “yellow”);// p thứ 2

Kết quả

Xét đoạn mã HTML sau:


<input name="nationality" type="text" value="Chinese">

<input name="nation" type="text" value="English">

<input name="country" type="text" value="Germany">

<input name="anothernation" type="text" value="Norwegian">

Ví dụ 4:

Chọn tất cả các phần tử input có thuộc tính name với giá trị có bắt đầu là “nation”  và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("input[name^='nation']").css("background-color", "yellow");

// input 1 và 2

Kết quả

Ví dụ 5:

Chọn tất cả các phần tử input có thuộc tính name với giá trị là hay có kết thúc là “nation”  và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("input[name$='nation']").css("background-color", "yellow");

// input 2 và 4

Kết quả

Ví dụ 6:

Chọn tất cả các phần tử input có thuộc tính name với giá trị khác “nation”  và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("input[name!='nation']").css("background-color", "yellow");

// input 1, 3 và 4

Kết quả

Ví dụ 7:

Chọn tất cả các phần tử input có thuộc tính name với giá trị chứa “nation”  và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("input[name*='nation']").css("background-color", "yellow");

// input 1, 2 và 4

Kết quả

Xét đoạn mã HTML sau:


<p title="Tomorrow">This is a paragraph.</p>

<p title="tomorrow">This is a paragraph.</p>

<p title="Tom">This is a paragraph.</p>

<p title="See You Tomorrow">This is a paragraph.</p>

<p title="Tomorrow-the day after today">This is a paragraph.</p>

Ví dụ 8:

Chọn tất cả các phần tử p có thuộc tính title với giá trị là “Tomorrow” hay chứa “Tomorrow-” và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p[title|='Tomorrow']").css("background-color", "yellow");

// p 1 và 5

Kết quả

Ví dụ 9:

Chọn tất cả các phần tử p có thuộc tính title với giá trị là “Tomorrow” hay chứa “Tomorrow” cách các chuỗi khác bởi khoảng trắng và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p[title~='Tomorrow']").css("background-color", "yellow");

// p 1 và 4

Kết quả

Ví dụ 10:

Xét đoạn mã HTML sau:


<input name="nationality" type="text" value="Chinese" required><br>

<input name="nation" type="text" value="English"><br>

<input name="country" type="text" value="Germany"><br>

<input name="anothernation" type="text" value="Norwegian"><br>

Chọn tất cả các phần tử p có thuộc tính type = text và chứa thuộc tính required và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("input[type='text'][required]").css("background-color", "yellow");

// p thứ 1

Kết quả

< Học jQuery