Содержание:
.attr( attributeName )Возвращает: Строка
Описание: Получить значение атрибута для первого элемента в наборе совпавших элементов.
-
версия добавлена: 1.0.attr( attributeName )
- attributeNameТип: СтрокаИмя атрибута для получения.
-
Метод .attr() получает значение атрибута только для первого элемента в наборе совпавших элементов. Чтобы получить значение для каждого элемента индивидуально, используйте цикл, например, метод jQuery .each() или .map().
Использование метода jQuery .attr() для получения значения атрибута элемента имеет две основные преимущества:
- Удобство: его можно вызывать непосредственно на объекте jQuery и объединять с другими методами jQuery.
- Согласованность в разных браузерах: значения некоторых атрибутов сообщаются несогласованно в разных браузерах, а даже в разных версиях одного браузера. Метод
.attr()уменьшает такие несоответствия.
Примечание: Значения атрибутов являются строками за исключением нескольких атрибутов, таких как value и tabindex.
Начиная с jQuery 1.6, метод .attr() возвращает undefined для атрибутов, которые не были установлены. Для извлечения и изменения свойств DOM, таких как checked, selected, или disabled состояние элементов формы, используйте метод .prop().
Атрибуты против свойств
Разница между атрибутами и свойствами может быть важна в конкретных ситуациях. До jQuery 1.6, метод .attr() иногда учитывал значения свойств при извлечении некоторых атрибутов, что могло привести к несогласованному поведению. Начиная с jQuery 1.6, метод .prop() предоставляет способ явного извлечения значений свойств, в то время как .attr() извлекает атрибуты.
Например, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, и defaultSelected должны извлекаться и устанавливаться с помощью метода .prop(). До jQuery 1.6 эти свойства извлекались с помощью метода .attr(), но это не входило в область применения attr. У них нет соответствующих атрибутов, и они являются только свойствами.
Что касается булевых атрибутов, рассмотрим элемент DOM, определенный HTML-разметкой <input type="checkbox" checked="checked" />, и предположим, что он находится в переменной JavaScript с именем elem.
elem.checked | true (Булево) Будет изменяться при изменении состояния флажка |
|---|---|
$( elem ).prop( "checked" ) | true (Булево) Будет изменяться при изменении состояния флажка |
elem.getAttribute( "checked" ) | "checked" (Строка) Начальное состояние флажка; не изменяется |
$( elem ).attr( "checked" ) (1.6+) | "checked" (Строка) Начальное состояние флажка; не изменяется |
$( elem ).attr( "checked" ) (до 1.6) | true (Булево) Изменяется при изменении состояния флажка |
Согласно спецификации форм W3C https://www.w3.org/TR/html401/interact/forms.html#h-17.4, атрибут checked является булевым атрибутом, что означает, что соответствующее свойство равно true, если атрибут вообще присутствует — даже если, например, у атрибута нет значения или он установлен на пустую строку или даже на "false". Это верно для всех булевых атрибутов.
Тем не менее, самый важный момент, который нужно запомнить об атрибуте checked заключается в том, что он не соответствует свойству checked. Атрибут фактически соответствует свойству defaultChecked и должен использоваться только для установки начального значения флажка. Значение атрибута checked не изменяется при изменении состояния флажка, а свойство checked изменяется. Следовательно, кроссбраузерный способ определения того, что флажок выбран, заключается в использовании свойства:
-
if ( elem.checked ) -
if ( $( elem ).prop( "checked" ) ) -
if ( $( elem ).is( ":checked" ) )
То же самое верно для других динамических атрибутов, таких как selected и value.
Дополнительные примечания:
- В Internet Explorer до версии 9 использование
.prop()для установки свойства элемента DOM на что-либо, кроме простого примитивного значения (число, строка или булево), может привести к утечкам памяти, если свойство не удалено (с помощью.removeProp()) перед удалением элемента DOM из документа. Для безопасной установки значений на объекты DOM без утечек памяти используйте.data().
Примеры:
Отобразить атрибут и свойство checked флажка при его изменении.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$( "input" )
.on( "change", function() {
var $input = $( this );
$( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
} )
.trigger( "change" );
</script>
</body>
</html> Демо:
Найти атрибут title первого <em> на странице.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is:<div></div>
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
</body>
</html> 
