Работа с атрибутами в 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);

Ещё темы этого раздела:

• Добавление и удаление DOM-свойств (disabled, checked, selected и др.)
• Добавление и удаление классов
• Получение и установка CSS-свойств элементам
• data-атрибуты и внутреннее хранилище jQuery