После освоения выбора элементов перейдём к манипуляции атрибутами с помощью библиотеки 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-элементов, значительно упрощая разработку веб-приложений.