Статья, в которой рассмотрим какие в jQuery имеются методы для работы с HTML-атрибутами элементов.

Что такое HTML-атрибуты?

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

Кроме HTML-атрибутов у нас есть ещё DOM-свойства. Это другие сущности, но связанные с HTML-атрибутами.

Чтобы понять как они связаны, нужно знать, что такое DOM.

DOM - это объектная модель документа, которую строит браузер, в соответствии с HTML-страницей, которую мы запросили, например, введя её URL в адресную строку. В DOM теги становятся объектами (узлами), а HTML-атрибуты - свойствами этих узлов.

Браузер при изменении DOM изменяет HTML-код, и наоборот, при изменении HTML-кода изменяет DOM. При этом синхронизация HTML-атрибутов и соответствующих им DOM-свойств не всегда осуществляется один к одному. Как это происходит можно прочитать в статье "Работа с HTML атрибутами и DOM свойствами"

При этом более предпочтительно выполнять операции не с HTML-атрибутами, а с соответствующими им DOM-свойствами. Для этого в jQuery имеется специальный для этого случая метод prop. Выполнять же операции с атрибутами следует, когда вам это действительно нужно выполнить через HTML.

Методы jQuery для выполнения операций над HTML атрибутами

В jQuery для выполнения действий над HTML-атрибутами имеется два метода.

Первый метод – это attr. Он используется, когда вам нужно, узнать значение требуемого атрибута, добавить к нему новый HTML-атрибут или изменить текущее значение некоторого атрибута на новое.

Второй метод – это removeAttr. Данный метод применяется для удаления определённого атрибута у элемента или набора элементов.

Работа с атрибутами в jQuery

Разберём, как работать с данными методами более подробно.

Как получить значение атрибута в jQuery?

Получить в jQuery значение необходимого атрибута осуществляется с помощью метода prop.

Синтаксис:

.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);

Темы, связанные с этой: