Работа с атрибутами в jQuery
В этой теме рассмотрим jQuery методы attr()
и removeAttr()
, которые используются для работы с атрибутами элементов.
Что такое HTML-атрибуты?
HTML-атрибуты – это дополнительные значения для установления различных характеристик HTML-элементам в HTML-коде. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

Кроме атрибутов у нас имеются ещё DOM-свойства, которые в большинстве случаев являются их отражением.
Образуются DOM-свойства во время чтения браузером HTML-кода, т.е. при строительстве DOM. DOM – это объектная модель документа. При её создании теги становятся элементами (узлами), а HTML-атрибуты переводятся в соответствующие DOM-свойства этих элементов.
Для сведений, атрибут, который мы устанавливаем в HTML-коде называется атрибутом содержимого. А DOM-свойство – IDL-атрибутом.
Более подробно прочитать про атрибуты, DOM-свойства и их отличия можно в этой статье.
В заключение можно отметить, что при написании кода на JavaScript зачастую лучше использовать именно DOM-свойства, а не соответствующие им атрибуты. Кстати, в jQuery для выполнения операций с DOM-свойствами имеется специальный метод prop()
. Описывается он в этой статье.
А сейчас познакомимся с методами jQuery для работы с атрибутами.
Методы attr() и removeAttr()
В jQuery для выполнения действий над атрибутами имеется два метода:
attr()
– используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое;removeAttr()
– применяется для удаления определённого атрибута у элемента или набора элементов.
Получение значения атрибута
Узнать значение определённого атрибута в jQuery осуществляется через attr()
:
// attributeName – атрибут, значение которого нужно получить
.attr('attributeName')
Например, получим значение атрибута href
элемента #search
:
<a id="search" href="https://yandex.ru">Яндекс</a>
<script>
// получим значение атрибута href и сохраним его в переменную href
var href = $('#search').attr('href');
// выведем значение переменной href в консоль
console.log(href); // https://yandex.ru
</script>
При применении attr()
к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.
<div class="section" id="section-1">...</div>
<div class="section" id="section-2">...</div>
<div class="section" id="section-3">...</div>
<script>
var attr = $('.section').attr('id');
console.log(attr); // "section-1"
</script>
Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each()
или map()
.
$('.section').each(function() {
console.log( $(this).attr('id') );
});
// Результат:
// section-1
// section-2
// section-3
Если атрибута, значение которого мы хотим получить у элемента нет, то attr()
вернёт undefined
:
<h1>...</h1>
<script>
var id = $('h1').attr('id');
console.log(id); // undefined
</script>
Этот сценарий можно использовать для проверки наличия определённого атрибута у элемента.
Например, проверим имеется ли у элемента #logo"
атрибут title
:
<img src="image.png" id="logo" alt="...">
<script>
if ($('#logo').attr('title') === undefined) {
// атрибут есть
} else {
// атрибута нет
}
</script>
Изменение значения атрибута
Изменение значения атрибута осуществляется также посредством attr()
.
Вариант синтаксиса attr()
для установки значения одному атрибуту:
// attributeName – имя атрибута
// value – новое значение (строка, число или null)
.attr('attributeName', value)
Кстати, если установить атрибуту null
, то он будет удалён.
Например, поменяем значение атрибута src
элемента #logo
:
<img id="logo" src="logo.png">
<script>
$('#logo').attr('src', 'new_logo.png');
</script>
Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:
// attributes – объект, содержащий набор пар «атрибут: значение»
.attr(attributes)
Пример установки элементу #logo
несколько атрибутов:
<img id="logo">
<script>
$('#logo').attr({
src: 'logo.png',
width: '250',
height: '250',
alt: '...'
});
</script>
Кроме этого в jQuery имеется также вариант установки атрибута с помощью функции:
// attr - имя атрибута
.attr('attr', function(index, value) {
// ...
})
В этом случае значение атрибута будет определяться результатом (строка или число), возвращаемой функцией. Если функция ничего не возвращает или undefined
, то текущее значение не изменяется (оно остаётся прежним).
Обратиться к текущему элементу в функции можно с помощью ключевого слова this
.
Параметры функции:
index
- индекс элемента в наборе;valueAttr
- текущее значение атрибута;
Например, установим для всех <li>
, которые не имеют id
атрибут id="index-{index}"
(где: {index}
- порядковый номер элемента в наборе).
<ul>
<li>One</li>
<li>Two</li>
<li id="item-3">Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script>
$('li').attr('id', function(index, valueAttr){
if (valueAttr === undefined) {
return 'item-' + (index + 1);
}
})
</script>
Добавление нового атрибута
В jQuery, установка нового атрибута или изменение существующего - это одна и также операция.
Пример, в котором всем ссылкам на странице установим атрибут rel
со значением nofollow
:
$('a').attr('rel', 'nofollow');
Пример, в котором добавим ко всем <li>
атрибут data-index
со значением соответствующем порядковому номеру этого элемента в #list
:
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
<script>
$('#list li').attr('data-index', function(index) {
return index + 1;
});
</script>
Как в jQuery удалить атрибут у элемента
В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr()
:
// attributeName - атрибут, который нужно удалить
.removeAttr('attributeName')
Например, удалим атрибут rel
у всех ссылок на странице:
$('a[rel]').removeAttr('rel');
В jQuery удалить атрибут можно также с помощью attr()
. Для этого ему нужно в качестве значения установить null
.
$('a[rel]').attr('rel', null);
Ещё темы этого раздела:
g1t.ru/video/chrome_sv4o9KqYhu.png
Пример, в котором получим значение атрибута href у элемента #search:
; — это лишнее?