Getting and setting attributes [attr()]

Trong chương trước chúng ta đã biết cách thay đổi text và nội dung HTML. May mắn hay, để thay đổi các thuộc tính khác của element cũng dễ dàng. Chúng ta có phương thức attr() và chỉ đưa tham số là tên của thuộc tính cần quan tâm:

<a href="http://www.google.com" id="aGoogle1">Google Link</a>
<script type="text/javascript">
$(function()
{
	alert($("#aGoogle1").attr("href"));
});
</script>

In this example, we get the value of the "href" attribute of our link and then show it to the user. To change an attribute, we simply specify an extra parameter:

<a href="http://www.google.com" id="aGoogle2">Google Link</a>
<script type="text/javascript">
$(function()
{
	$("#aGoogle2").attr("href", "http://www.google.co.uk");
});
</script>

Đoạn code trên sẽ thay đổi đường dẫn tới Google. Phương thức attr() có thể ánh xạ các cặp tên/giá trị, để thiết lập nhiều thuộc tính cùng thời điểm. Tại đây chúng ta sẽ thiết lập cả thuộc tính href và title đồng thời:

<a href="http://www.google.com" id="aGoogle3">Google Link</a>
<script type="text/javascript">
$(function()
{
	$("#aGoogle3").attr(
	{ 
		"href" : "http://www.google.co.uk", 
		"title" : "Google.co.uk"
	});
});
</script>

Phương thức attr() cũng hỗ trợ overload mà tham số giá trị là một hàm callback, cho phép bạn truy cập vào index của element cũng như là giá trị của thuộc tính. Ví dụ:

<a href="http://www.google.com/" class="google">Google.com</a><br />
<a href="http://www.google.co.uk/" class="google">Google UK</a><br />
<a href="http://www.google.de/" class="google">Google DE</a><br />

<script type="text/javascript">
$(function()
{
	$("a.google").attr("href", function(index, oldValue)
	{
		return oldValue + "imghp?tab=wi";
	});
});
</script>

Trong ví dụ, chỉ thay đổi đường dẫn của Google tới tìm kiếm hình ảnh thay vì mặc định bằng cách dùng thêm tham số. Trong ví dụ này ta không dùng tham số index nhưng ta có thể nếu cần.