Using attributes

Trong chương trước, chúng ta đã xem cách mà chúng ta có thể tìm thành phần trong trang thông qua class hay ID. Hai thuộc tính này liên quan tới nhau vì thực tế bạn có thể dùng chúng để thay đổi kiểu thành phần với CSS nhưng với jQuery, bạn có thể tìm thành phần dựa trên bất kỳ thuộc tính nào. Có nhiều loại nhưng chúng ta sẽ chỉ xem một số.

Find elements with a specific attribute

Tác vụ cơ bản nhất khi chọn thành phần dựa trên thuộc tính là tìm mọi thành phần có thuộc tính nhất định. Chú ý rằng ví dụ tiếp theo không yêu cầu có thuộc tính với giá trị nhất định, trong thực tế là vậy. Cú pháp cho selector này là dấu ngoặc vuông với tên thuộc tính bên trong, ví dụ [name] hay [href]. Đây là ví dụ:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
	$("[title]").css("text-decoration", "underline");
});
</script>

Chúng ta dùng selector thuộc tính để tìm mọi thành phần trong trang có thuộc tính title và gạch chân chúng. Như đã đề cập, nó lấy mọi thành phần có title mà không quan tâm tới giá trị nhưng đôi khi bạn sẽ muốn tìm thành phần với thuộc tính cụ thể.

Find elements with a specific value for a specific attribute

Đây là ví dụ về việc chúng ta tìm thành phần với giá trị cụ thể:

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />

<script type="text/javascript">
$(function()
{
	$("a[target='_blank']").append(" [new window]");
});
</script>

Selector này đơn giản cho jQuery biết phải tìm mọi link (có thành phần a) có thuộc tính targer bằng giá trị "_blank" và sau đó đưa vào đọan text "[new window]". Nhưng nếu bạn tìm mọi thành phần mà không có giá trị đó thì sao? Rất dễ:

$("a[target!='_blank']").append(" [same window]");

Sự khác biệt ở đây chỉ là dùng != thay vì =, giống như nhiều ngôn ngữ lập trình khác.

Và có nhiều khả năng:

Tìm các thành phần mà có giá trị bắt đầu với một chuỗi cụ thể dùng ^=:

$("input[name^='txt']").css("color", "blue");

Tìm thành phần mà giá trị kết thúc bằng chuỗi dùng $=:

$("input[name$='letter']").css("color", "red");

Tìm thành phần với giá trị chứa từ cụ thể:

$("input[name*='txt']").css("color", "blue");