.attr()

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

Содержание:

.attr( attributeName )
- .attr( attributeName )
.attr( attributeName, value )

.attr( attributeName )Возвращает: String

Описание: Получает значение атрибута первого элемента из набора выбранных элементов.

добавлено в версии: 1.0.attr( attributeName )
- attributeName
  
  Тип: String
  
  Имя атрибута, значение которого нужно получить.

Метод .attr() получает значение атрибута только для первого элемента в выбранном наборе. Чтобы получить значение отдельно для каждого элемента, используйте конструкцию цикла, например метод .each() или .map() в jQuery.

Использование метода .attr() в jQuery для получения значения атрибута элемента имеет два основных преимущества:

Удобство: Его можно вызывать непосредственно для объекта 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="" /> и сохранён в переменной JavaScript с именем elem:

`elem.checked`	`true` (Boolean) Меняется при изменении состояния флажка
`$( elem ).prop( "checked" )`	`true` (Boolean) Меняется при изменении состояния флажка
`elem.getAttribute( "checked" )`	`""` (String) Исходное состояние флажка; не меняется
`$( elem ).attr( "checked" )` (4.0+)	`""` (String) Исходное состояние флажка; не меняется
`$( elem ).attr( "checked" )` (1.6-3.x)	`"checked"` (String) Исходное состояние флажка; не меняется
`$( elem ).attr( "checked" )` (pre-1.6)	`true` (Boolean) Меняется вместе с состоянием флажка

Согласно спецификации W3C по формам, атрибут 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().

Примеры:

Пример 1

Отображает атрибут и свойство 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-4.0.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>

Демонстрация:

Пример 2

Находит атрибут 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-4.0.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>

Демонстрация:

.attr( attributeName, value )Возвращает: jQuery

Описание: Задаёт один или несколько атрибутов для набора выбранных элементов.

добавлено в версии: 1.0.attr( attributeName, value )
- attributeName
  
  Тип: String
  
  Имя атрибута, который нужно задать.
- value
  
  Тип: String или Number или Null или Boolean
  
  Значение, которое нужно присвоить атрибуту. Если null, указанный атрибут будет удалён (как и при вызове .removeAttr()). Не относящиеся к ARIA атрибуты также можно удалить, передав false.
добавлено в версии: 1.0.attr( attributes )
- attributes
  
  Тип: PlainObject
  
  Объект с парами «атрибут — значение», которые нужно задать.
добавлено в версии: 1.1.attr( attributeName, function )
- attributeName
  
  Тип: String
  
  Имя атрибута, который нужно задать.
- function
  
  Тип: Function( Integer index, String attr ) => String или Number
  
  Функция, возвращающая задаваемое значение. this — текущий элемент. В качестве аргументов получает индекс элемента в наборе и прежнее значение атрибута.

Метод .attr() — удобный способ задавать значения атрибутов, особенно если нужно задать несколько атрибутов или использовать значения, возвращаемые функцией. Рассмотрим следующее изображение:

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

Задание простого атрибута

Чтобы изменить атрибут alt, просто передайте методу .attr() имя атрибута и его новое значение:

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

Атрибут можно добавить таким же образом:

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

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

Чтобы одновременно изменить атрибут alt и добавить атрибут title, передайте методу оба имени и значения сразу в виде обычного объекта JavaScript. Каждая пара «ключ — значение» в объекте добавляет или изменяет атрибут:

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

При задании нескольких атрибутов кавычки вокруг их имён необязательны.

Удаление атрибута

Чтобы удалить атрибут, вызовите .attr( name, null ) или используйте .removeAttr( name ). Для атрибутов, не относящихся к ARIA, в jQuery 4.0+ также можно вызвать .attr( name, false ).

Примечание: Поскольку атрибуты ARIA часто связывают поведение со значением "false", которое отличается от отсутствия атрибута, передача false в качестве значения атрибута, имя которого начинается с "aria-…", преобразует это значение в строку "false", а не удалит атрибут. Чтобы гарантированно удалить атрибут, используйте метод .removeAttr() или передайте null в качестве значения методу установки .attr().

ПРЕДУПРЕЖДЕНИЕ: При задании атрибута 'class' всегда используйте кавычки!

Примечание: Попытка изменить атрибут type у элемента input или button, созданного с помощью document.createElement(), приведёт к исключению в Internet Explorer 8 и более ранних версиях.

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

Используя функцию для задания атрибутов, можно вычислить значение на основе других свойств элемента. Например, чтобы добавить новое значение к существующему:

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

Использование функции для вычисления значений атрибутов особенно полезно при одновременном изменении атрибутов нескольких элементов.

Примечание: Если функция установки ничего не возвращает (то есть function(index, attr){}) или возвращает undefined, текущее значение не изменяется. Это удобно, когда нужно задавать значения выборочно, только при выполнении определённых условий.

Примеры:

Пример 1

Задаёт несколько атрибутов для всех элементов <img> на странице.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "/resources/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>

Демонстрация:

Пример 2

Задаёт идентификаторы div-элементам в зависимости от их положения на странице.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  b {
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
 
<script>
$( "div" )
  .attr( "id", function( arr ) {
    return "div-id" + arr;
  })
  .each(function() {
    $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" );
});
</script>
 
</body>
</html>

Демонстрация:

Пример 3

Задаёт атрибут src изображения на основе атрибута title.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "/resources/" + this.title;
});
</script>
 
</body>
</html>

Содержание:

.attr( attributeName )Возвращает: String

добавлено в версии: 1.0.attr( attributeName )

Атрибуты и свойства

Дополнительные примечания:

Примеры:

Пример 1

Демонстрация:

Пример 2

Демонстрация:

.attr( attributeName, value )Возвращает: jQuery

добавлено в версии: 1.0.attr( attributeName, value )

добавлено в версии: 1.0.attr( attributes )

добавлено в версии: 1.1.attr( attributeName, function )

Задание простого атрибута

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

Удаление атрибута

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

Примеры:

Пример 1

Демонстрация:

Пример 2

Демонстрация:

Пример 3

Демонстрация: