Метод attr - получение и изменение атрибутов с помощью jQuery
Метод attr позволяет получить и изменить
любой атрибут элемента.
Важно не путать свойства и атрибуты элементов.
При создании DOM дерева атрибуты переводятся
в соответствующие им DOM свойства элементов. Их
названия не всегда совпадают, как и их значения.
Некоторые свойства также могут не иметь
соответствующих им атрибутов, они могут быть
получены и установлены только при использовании метода
prop,
например свойство
tagName.
Синтаксис
Получение значения атрибута:
$(селектор).attr(имя атрибута);
Изменение значения атрибута:
$(селектор).attr(имя атрибута, новое значение);
Изменение значений нескольких атрибутов:
$(селектор).attr({первый_атрибут: новое_значение, второй_атрибут: новое_значение, ...});
Применение функции к каждому элементу в наборе:
$(селектор).attr(имя атрибута, function(номер в наборе, текущее значение атрибута));
Пример
В следующем примере мы получим инпут по его id
и выведем на экран значение его атрибута value:
<input type="text" value="!!!" id="test">
let value = $('#test').attr('value');
console.log(value);
Пример
А теперь запишем новое значение 'www'
в этот же атрибут:
<input type="text" value="!!!" id="test">
$('#test').attr('value', 'www');
HTML код станет выглядеть так:
<input type="text" value="www" id="test">
Пример
Давайте поменяем одновременно атрибуты type
и value:
<input type="text" value="!!!" id="test">
$('#test').attr({value: 'www', type: 'password'});
HTML код станет выглядеть так:
<input type="password" value="www" id="test">
Пример
Давайте каждому инпуту поменяем атрибут value
- добавим к текущему value порядковый номер
элемента в наборе:
<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">
$('input').attr('value', function(index, value) {
return value + ' ' + index;
});
HTML код станет выглядеть так:
<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">
Смотрите также
-
метод
removeAttr,
который позволяет удалять атрибуты элементов -
метод
prop,
который позволяет работать со свойствами элементов -
метод
val,
который позволяет получать и изменять текущее значение элемента