Методы jQuery для работы с атрибутами
Статья, в которой рассмотрим какие в jQuery имеются методы для работы с атрибутами элементов.
Что такое HTML-атрибуты?
HTML-атрибуты - это такие сущности, которые используются для установления различных характеристик HTML элементам. Они задаются внутри открытого тега элемента.

Кроме атрибутов у нас есть ещё DOM-свойства. Это другие сущности, некоторым образом связанные с атрибутами.
Чтобы понять как они связаны, нужно знать, что такое DOM.
DOM - это объектная модель документа, которую браузер строит в соответствии с HTML-страницей, которую он получил, когда пользователь, например, ввел её URL в адресную строку. При строительстве DOM теги становятся объектами (узлами), а HTML-атрибуты - свойствами этих узлов.
Более подробно прочитать при атрибуты и DOM-свойства, а также чем они отличаются можно в этой статье.
В заключение можно отметить, что более предпочтительно выполнять операции с DOM-свойствами, а не с соответствующими им атрибутами. Для этого в jQuery имеется специальный для этого случая метод prop. Выполнять операции с атрибутами нужно только тога, когда это действительно необходимо.
Методы jQuery для выполнения операций над атрибутами
В jQuery для выполнения действий над атрибутами имеется два метода.
Первый метод – это attr
. Он используется, когда вам нужно, узнать значение требуемого атрибута, добавить к нему новый атрибут или изменить текущее значение некоторого атрибута на новое.
Второй метод – это removeAttr
. Данный метод применяется для удаления определённого атрибута у элемента или набора элементов.
Разберём, как работать с данными методами более подробно.
Как получить значение атрибута в jQuery?
Получить в jQuery значение необходимого атрибута выполняется через метод attr
.
Синтаксис:
.attr( attributeName ) // attributeName - имя атрибута, значение которого нужно получить
Пример, в котором получим значение атрибута href
у элемента #search
:
<a id="search" href="https://yandex.ru">Яндекс</a> ... <script> // получим значение атрибута href у элемента #search var href = $('#search').attr('href'); // выведем значение переменной href в консоль console.log(href); // Результат: // https://yandex.ru </script>
Если вы применили метод attr
к набору элементов, то в этом случае он вернёт значение атрибута только для первого элемента этого набора.
<div class="section" id="section-1">Секция 1</div> <div class="section" id="section-2">Секция 2</div> <div class="section" id="section-3">Секция 3</div> ... <script> var attr = $('.section').attr('id'); console.log(attr); // Результат: // "section-1" </script>
Для того чтобы получить значение у каждого элемента набора можно воспользоваться jQuery-методом 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>
Это можно использовать для проверки наличия определённого атрибута у элемента.
Например, проверим имеется ли атрибут title
у элемента #image-logo"
:
<img src="image.png" id="image-logo" alt="..."> ... <script> if ($('#image-logo').attr('title') === undefined) { // элемент не имеет атрибут title console.log('Элемент не имеет атрибут title'); } else { // выведем в консоль сообщение о том, что у элемента есть атрибут title console.log('У элемента есть атрибут title'); } // Результат: // "Элемент не имеет атрибут title" </script>
Как изменить значение атрибута?
Изменение значения атрибута осуществляется тоже с помощью метода attr
. Для этого используется следующий синтаксис:
// Вариант №1 (для установки значения одному атрибуту) .attr( attributeName, value ) // attributeName (тип: строка) - имя атрибута, значение которого нужно изменить // value (тип: строка, число или null) - значение, которое нужно установить атрибуту // Вариант №2 (для установки значений нескольким атрибутам) .attr( attributes ) // attributes (тип: объект) - в формате объекта (пар атрибут-значение) // Например: // $('имя_атрибута').attr({ // attributeName: value, // attributeName: value // }); // Вариант №3 (с использованием функции) // в этом случае атрибут будет иметь значение, которое вернёт функция в качестве своего результата .attr( attributeName, function ) // attributeName (тип: строка) - имя атрибута, значение которого нужно изменить // function - функция, которая будет определять устанавливаемое значение // Синтаксис функции: // Function( Integer index, String attr ) => String или Number
Пример, котором поменяем значение атрибута src
у элемента #logo
:
<img id="logo" src="logo.png"> ... <script> $('#logo').attr('src', 'new_logo.png'); </script>
Как в jQuery добавить новый атрибут к элементу?
В jQuery, да также, как и в JavaScript, нет различия в операциях, когда мы хотим изменить значение атрибуту или установить новый атрибут.
Пример, в котором всем ссылкам на странице установим атрибут rel
со значением nofollow
:
$('a').attr('rel','nofollow');
Пример, в котором добавим ко всем li
, находящихся в списке #list
атрибут data-index
, которое будет иметь значение в соответсвии с их порядковвым номером:
<ul id="list"> <li></li> <li></li> <li></li> </ul> <script> $('#list li').attr('data-index', function(index){ return index + 1; }); </script>
Если функция ничего не вернула или возвратила undefined
, то текущее значение атрибута не будет изменено (оно останется прежним). Данную особенность полезно использовать, когда значение атрибута необходимо установить только в зависимости от некоторых условий.
Как в jQuery удалить атрибут у элемента?
В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr
.
Синтаксис метода removeAttr
:
.removeAttr( attributeName ) // attributeName - имя атрибута, который нужно удалить
Например, удалим атрибут rel
у всех ссылок на странице:
$('a[rel]').removeAttr('rel');
В jQuery удалить атрибут также можно с помощью метода attr
. В этом случае ему нужно в качестве значения установить значение null
.
$('a[rel]').attr('rel', null);
Темы, связанные с этой:
g1t.ru/video/chrome_sv4o9KqYhu.png
Пример, в котором получим значение атрибута href у элемента #search:
; — это лишнее?