Работа с атрибутами

.attr()

Возвращает или изменяет значение атрибутов у выбранных элементов страницы. Функция имеет четыре варианта использования:

.attr(attrName):string1.0
возвращает значение атрибута attrName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.
.attr(attrName, value):jQuery1.0
атрибуту attrName будет присвоено значение value, у всех выбранных элементов.
.attr({attrName1:value1, attrName2:value2, ...}):jQuery1.0
группе аттрибутов attrName1, attrName2, ... будут присвоены значения value1, value2, ..., у всех выбранных элементов.
.attr(attrName, function(index, value)):jQuery1.1
атрибуту attrName будет присвоено значение, возвращенное пользовательской функцией (если она ничего не вернет, то атрибут просто останется каким был до этого). Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее значение атрибута attrName у элемента.

Примеры использования:

$("div").attr("class") вернет имя класса у первого div-элемента на странице
$("div").attr("class", "divEl") класс всех div-элементов на странице станет равным divEl
$("div").attr({"class":"divEl", "title":"Див"}) класс div-элементов станет равен divEl, а title — "Див"
$(".rool").attr("title") вернет подсказку элемента с классом rool. Если таких элементов на странице несколько — вернет первого из них.

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

Замечание 2: IE не позволяет менять атрибут type у элементов input и button.

Изменения в jQuery-1.6

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

elem.checked true
$(elem).prop("checked") true
elem.getAttribute("checked") пустая строка.
$(elem).attr("checked") пустая строка для jQuery-1.6+ и true для более ранних версий.

В действии

найдем элемент с идентификатором newsBlock и поместим в него, значение его же класса:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div, span {
      display: block;
      width: 50px;
      height: 50px;
      float: left;
      padding: 15px;
      margin: 5px;
      background-color: #EEEEEE;
      font-size: 12pt;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="titleBlock"~gt~ 1 ~lt~/div~gt~
  ~lt~div id="contentBlock"~gt~ 2 ~lt~/div~gt~
  ~lt~div id="newsBlock" class="news"~gt~ 3 ~lt~/div~gt~
~lt~script~gt~
    var className = $("#newsBlock").attr("class");
    $("#newsBlock").text(className);
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • работа с атрибутами элементов страницы
  • атрибуты элементов страницы
  • значение атрибута
  • получить значение атрибута
  • изменить значение атрибута
  • установить значение атрибута
  • присвоить значение атрибуту
  • .attr()
  • attr()