jQuery: Работа с атрибутами (Урок 11)

После освоения выбора элементов перейдём к манипуляции атрибутами с помощью библиотеки jQuery. Научимся получать значения атрибутов, изменять их и выполнять различные действия с тегами в зависимости от наличия или отсутствия определённых атрибутов. Рассмотрим пример с четырьмя картинками. Опишем их в HTML:

<img src="image1.jpg" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
<img src="image3.jpg" src="image3.jpg">
<img src="image4.jpg" src="image4.jpg">

В двух последних изображениях удалим атрибут alt. Будем искать изображения без атрибута alt и добавлять его со значением по нашему выбору.

В JavaScript это потребовало бы много времени: выбор атрибутов, проверка, сравнение и добавление значений. jQuery значительно упрощает эту задачу.

Для проверки наличия атрибута используется функция $ вместе с псевдо-селектором :not:

$('img:not([alt])')

Эта строка находит все теги <img>, у которых отсутствует атрибут alt.

Добавление атрибутов осуществляется функцией attr(). Она принимает два параметра: название атрибута и его значение.

$('img:not([alt])').attr('alt', 'jQuery');

После выполнения этого кода, два изображения без атрибута alt получат атрибут alt со значением «jQuery».

Альтернативная запись:

$('img').not('[alt]').attr('alt', 'jQuery');

Оба варианта кода идентичны по функциональности. Первый вариант — более компактный, второй — более развёрнутый.

Просмотр атрибутов

Для просмотра атрибутов выберем все изображения и переберём их в цикле:

var img = $('img');
var text = '';

$.each(img, function(index) {
  text += $(this).attr('alt') + '<br>';
});

alert(text);

Создаётся переменная text, в которую последовательно записываются значения атрибута alt каждого изображения. Результат выводится с помощью alert().

Для получения значения атрибута class следует использовать attr(‘class’) или attr(‘className’). Прямое обращение к class некорректно, так как class — зарезервированное слово.

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

Что будем искать? Например,программа