Получение и изменение атрибутов [attr()]

В предыдущей главе мы увидели как легко оказалось получать и задавать текстовый и HTML-контент элемента. К счастью, изменять один или несколько атрибутов элемента так же легко. Мы воспользуемся методом attr(), самый простой вариант которого принимает всего один параметр - имя атрибута, который мы хотим получить:

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

В этом примере мы получаем значение атрибута "href" для нашей ссылки и затем показываем его пользователю. Чтобы изменить атрибут, нам потребуется еще один параметр:

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

Это изменит ссылку так, чтобы она вела на Британскую версию Google. Метод attr() может также получать набор пар имя-значение (map), чтобы изменить несколько атрибутов зараз. Здесь мы одновременно меняем атрибуты href и title:

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

Метод attr() также поддерживает специальную перегрузку, где параметр value является callback-функцией, что позволяет получить доступ не только к текущему значению, но и к индексу элемента. Ниже представлен пример.

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

Мы просто меняем ссылки на Google так, чтобы они вели на страницу поиска изображений, вместо главной страницы, добавив дополнительный параметр к атрибуту href. В этом примере мы не использовали параметр index, но мы могли бы, если бы нам потребовалось знать с каким именно по номеру элементом мы имеем дело.