Получение или изменение значения атрибутов выбранных элементов

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

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

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

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

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

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

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

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

Присваивает атрибуту 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 для более ранних версий

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

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

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

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

или

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

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

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

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

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

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

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *