.attr() – возвращает или изменяет значение атрибутов у выбранных элементов страницы.

Функция имеет четыре варианта использования:

.attr( attributeName )

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

• attributeName — имя атрибута.

.attr( attributeName, value )

Устанавливает атрибуту attrName значение value, у всех выбранных элементов.

• attributeName — имя атрибута;
• value – значение, присеваемое атрибуту.

.attr( attributes )

Устанавливает значения атрибутов, полученные в виде пар ключ:'значение' объекта attributes.

• attributes — объект {attrName1:value1, attrName2:value2, ...};

.attr( attributeName, function )

Присваивает атрибуту attributeName значение, возвращенное функцией function() для всех элементов набора jQuery

• attributeName — имя атрибута;
• function (index, attr) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе, а возвращаемое ею значение становится значением атрибута
  • index — позиция элемента в наборе;
  • attr — текущее значение атрибута attributeName у элемента.

Замечание 1: используя метод .attr(name), вы получите значения атрибута только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

.attr() или .prop()

В определенных ситуациях разница между .attr() и .prop() существенна. До jQuery 1.6 .attr() содержал множество багов и был непрост в поддержке. Начиная с jQuery 1.6 метод .prop() предназначен для работы со свойствами DOM-объектов, в то время как .attr() – для работы с атрибутами.

Например, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, и defaultSelected должны быть получены или изменятся функцией .prop()

Начиная с jQuery 1.6, метод .attr() возвращает undefined для тех атрибутов, значение которых не было задано. Для получения и выставления таких опций как checked, selected, или disabled используйте метод .prop()

Допустим у нас есть элемент <input type="checkbox" checked />, а в переменной elem хранится его DOM-объект. В этом случае разница при работе с атрибутами и свойствами существенна, т.к. идет речь об атрибутах не требующих указания значений (checked и disabled в input-элементах). Сравним результаты:

• elem.checked – возвращает true
• $( elem ).prop( "checked" ) – возвращает true
• elem.getAttribute( "checked" ) – возвращает пустую строку
• $( elem ).attr( "checked" ) – начиная с jQuery 1.6 возвращает пустую строку и true для более ранних версий

Кросс-браузерный способ определить, установлен ли флажок:

if ( elem.checked )

или

if ( $( elem ).prop( "checked" ) )

или

if ( $( elem ).is( ":checked" ) )

Как задать один атрибут

Предположим, у нас есть следующее изображение:

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller">

Для задачи значения атрибуту, в качестве первого аргумента передаём имя, а в качестве второго, значение:

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

или

$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );

Как задать сразу несколько атрибутов

Для смены и выставления значения сразу нескольких атрибутов, передадим простой JavaScript объект вида ключ:значение. Каждый ключ – это атрибут:

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

В этом случае имена атрибутов брать в кавычки не обязательно

Внимание! При работе с атрибутом ‘class’, его имя нужно взять в кавычки!

Замечание 2: jQuery не позволит изменить значение атрибута type элементов <input> или <button>, выкинет ошибку. Дело в том, что атрибут type не можут быть изменён в Internet Explorer.

Динамическое формирование значения атрибутов

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

Это может быть полезно для изменения атрибутов сразу большого числа элементов.