Метод .attr() позволяет получить и изменить любой атрибут элемента.

См. также метод prop, который позволяет работать со свойствами элементов.

См. также урок манипулирование элементами страницы через jQuery для более полного понимания.

Синтаксис

Получение значения атрибута:

$(селектор).attr(имя атрибута)

Изменение значения атрибута:

$(селектор).attr(имя атрибута, новое значение)

Изменение значений нескольких атрибутов:

$(селектор).attr({первый_атрибут:новое_значение, второй_атрибут:новое_значение, ...})

Дополнительно

Начиная с jQuery1.1 метод attr может применить заданную функцию к каждому элементу в наборе.

При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущее значение атрибута:

$(селектор).attr(имя атрибута, function(номер в наборе, текущее значение атрибута))

Имена переменных в функции могут быть любыми.

К примеру, если для первого параметра 'номер в наборе' мы дадим имя index - тогда внутри нашей функции будет доступна переменная index, в которой будет лежать номер в наборе для того элемента, который функция обрабатывает в данный момент времени.

Аналогично, если для второго параметра 'текущее значение атрибута' дать, к примеру, имя value - тогда внутри нашей функции будет доступна переменная value, в которой будет лежать значение атрибута того элемента, который функция обрабатывает в данный момент времени:

$(селектор).attr(имя атрибута, function(index, value){
	//тут доступны переменные index и value
})

Значение атрибута каждого элемента поменяется на то, который вернет функция конкретно для этого элемента.

Изменения в jQuery1.6

Первое

Начиная с версии jQuery1.6, при попытке получить значение атрибута, которым элемент не обладает, метод attr вернет undefined.

В более ранних версиях, вместо этого возвращалась пустая строка.

Второе

Начиная с версии jQuery1.6 разделены способы работы с атрибутами и свойствами - теперь для свойств следует использовать prop.

Свойства - это атрибуты типа checked и disabled.

Посмотрите разницу на примере атрибута disabled:

<input type="text" disabled>
elem.disabled //true
$(elem).prop("disabled") //true
elem.getAttribute("disabled") //пустая строка
$(elem).attr("disabled") //пустая строка для jQuery1.6+ и true для более ранних версий

Примеры

Пример

В следующем примере мы получим инпут по его id и выведим на экран значение его атрибута value:

<input type="text" value="!!!" id="test">
var value = $('#test').attr('value');document.write(value);

Результат выполнения кода:

привет

Пример

А теперь запишем новое значение 'www' в этот же атрибут:

<input type="text" value="!!!" id="test">
$('#test').attr('value', 'www');

HTML код станет выглядеть так:

<input type="text" value="www" id="test">

Пример

Давайте поменяем одновременно атрибуты type и value:

<input type="text" value="!!!" id="test">
$('#test').attr({value:'www', type:'password'});

HTML код станет выглядеть так:

<input type="password" value="www" id="test">

Пример

Давайте каждому инпуту поменяем атрибут value - добавим к текущему value порядковый номер элемента в наборе:

<input type="text" value="первый">
<input type="text" value="второй">
<input type="text" value="третий">
$('input').attr('value', function(index, value){
	return value+' '+index;
});

HTML код станет выглядеть так:

<input type="text" value="первый 1">
<input type="text" value="второй 2">
<input type="text" value="третий 3">