Как в jquery добавить атрибут и изменить его значение

Приветствую вас, дорогой читатель. Сегодня я предлагаю нам с вами рассмотреть очень интересные возможности библиотеки – управление атрибутами. Это открывает много возможностей в плане управления. Сегодня я вам покажу, как в jquery добавить атрибуты нужным элементам, а также как поменять их значения. Мы посмотрим все это на примере.

Работаем с атрибутами в jquery

Итак, для этого библиотека предоставляет нам замечательный метод – attr(). Собственно говоря, он устанавливает выбранным элементам записанные в нем атрибуты, либо меняет их значения, если они уже присутствуют у элемента.

Записывать атрибуты в attr можно двумя способами:

$(‘selector’).attr({id: “new”, width: “300”});

Как видим, здесь имена атрибутов и их значения заключаются в фигурные скобки, это позволяет записать ключ, а через двоеточие в кавычках его значение. Если нужно перечислить несколько атрибутов, просто ставим запятую. В самом конце не забывайте закрыть фигурную и круглую скобку, а также поставить точку с запятой.

Можно записать и так: attr(ключ, значение). Вот пример:

$(“a”).attr(“target”, “_blank”);

Все ссылки на странице будут открываться в новом окне, поскольку мы добавили соответствующий атрибут. Заметьте, что в этом случае оба значения заключаются в кавычки и разделяются запятой, фигурные скобки не нужны. Через запятую вы также можете продолжить перечисление нужных атрибутов в форме: ключ – значение.

Разбираем пример с манипуляцией атрибутами

Для примера я скачал при картинки с изображением красивых парков и вставил их на свою веб-страницу. Сейчас они размером примерно 200 на 140 пикселей. Давайте сделаем так, чтобы при перезагрузке страницы их размеры уменьшились вдвое. Вот функция:

$(document).ready(function(){
        $("img").attr({width:"100",height:"70"});
    });

$(document).ready – это как раз команда к запуску функции в момент, когда документ загружен. Таким образом, если мы сейчас обновим страницу, наши изображения станут меньше в два раза. Проверяем и убеждаемся, что так и есть. Попробуйте также написать по-другому (ключ — значение), чтобы протестировать и этот вариант.

$(document).ready(function(){
        $("img").attr("width", "100", "height", "70");
    });

Ничего не изменилось, значит, такая запись тоже работает.
Давайте немного увеличим размеры изображений, а также применим к ним определенные css-правила, не трогая при этом таблицу стилей, все через jQuery:

$(document).ready(function(){
        $("img").attr("width", "180", "height", "120").css("webkitFilter", "hue-rotate(90deg)");
    });

Кажется, впервые мы с вами использовали несколько методов. Во-первых, здесь у всех изображений меняются размеры. Во-вторых, с помощью метода css мы добавляем к ним свойство filter (с префиксом webkit для лучшей поддержки) со значением hue-rotate(90deg), что буквально означает поворот цвета на 90 градусов от начального.

Хочу обратить ваше внимание, что в jQuery в именах свойств не пишутся дефисы. В CSS свойство записывается так:
-webkit-filter,
Background-color
В jQuery:
webkitFilter,
backgroundColor.

Я думаю, вы уловили разницу. Ну а на этом я буду заканчивать эту статью. Я думаю, сегодня вы уловили для себя суть работы с атрибутами. Буду рад услышать ваши мнения и вопросы в комментариях, для этого и пишутся эти статьи, чтобы помочь вам разобраться на начальных этапах работы с библиотекой. На этом я с вами прощаюсь. Вы можете подписаться на обновления, если хотите постоянно получать новые статьи себе на почту.