Работа с атрибутами
Возвращает или изменяет значение атрибутов у выбранных элементов страницы. Функция имеет четыре варианта использования:
Примеры использования:
$("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~