Работа с атрибутами элемента в jQuery

Работа с атрибутами элемента в jQuery

От автора: приветствую вас, друзья. В этой статье мы познакомимся с методом attr в jQuery и узнаем, как работать с атрибутами элементов в jQuery, а также узнаем дополнительные способы управления оформлением элементов, помимо метода css.

В предыдущей статье мы познакомились с методом css в jQuery, благодаря которому можно получать или изменять свойства css у элемента и, соответственно, оформлять элемент. Однако метод css — не единственный способ работы с оформлением элемента. Давайте познакомимся с другими возможностями и начнем с методов, которые позволяют манипулировать классами элементов.

Допустим у нас есть кнопка:

<button>Кнопка</button>

Работа с атрибутами элемента в jQuery

И пара классов, которые можно использовать для оформления кнопки:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
.btn{
 border: 1px solid transparent;
 cursor: pointer;
 font-size: 14px;
 padding: 6px 12px;
 text-align: center;
}
.btn-success{
 background-color: #5cb85c;
 border-color: #4cae4c;
 color: #fff;
}

Используя jQuery мы хотим динамически оформить данную кнопку. Конечно, мы могли бы взять стили из описанных правил и, используя метод css, оформить кнопку. Однако есть способ проще и лучше. jQuery предлагает набор методов для манипулирования классами элементов и в первую очередь нам интересны два из этих методов — addClass и removeClass.

Как вы уже догадались из названий методов, первый добавляет класс, второй — удаляет. Давайте попробуем добавить первый класс — btn:

$('button').addClass('btn');

Работа с атрибутами элемента в jQuery

Нам не пришлось писать стили в коде JS, достаточно всего-то присвоить существующий класс CSS и описанные в нем стили будут применены к элементу. Это достаточно удобно, поскольку если мы в дальнейшем захотим изменить оформление элемента, нам не нужно будет лезть в код jQuery, достаточно будет сделать изменения в файле стилей.

Если нам нужно добавить более одного класса, тогда мы просто перечислим нужный набор классов через пробел, точно так же, как это делается в коде HTML:

$('button').addClass('btn btn-success');

Работа с атрибутами элемента в jQuery

Метод removeClass имеет аналогичный синтаксис, но работает с точностью до наоборот, т.е. удаляет один или больше классов у элементов. Попробуйте проверить это самостоятельно.

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

Благодаря этим методам мы можем манипулировать абсолютно любыми атрибутами элементов: src, alt, width, height и т.д. у тега img, href — у тега ссылки и прочими. Для примера возьмем ту же кнопку:

<button class="btn btn-success">Кнопка</button>

И получим значение ее атрибута class (это ведь также атрибут любого элемента):

var btn = $('button').attr('class');
console.log(btn);

Работа с атрибутами элемента в jQuery

Работает! Ну а коль мы можем получить значение атрибута класс, значит, можем и изменить или установить его. Например, если для кнопки не назначен класс, тогда мы можем это сделать, использовав метод attr:

$('button').attr('class', 'btn btn-success');

Или же, наоборот, можем удалить значение указанного атрибута:

$('button').removeAttr('class');

Конечно, для манипулирования классами логичнее использовать специальные методы addClass и removeClass, но суть работы метода attr, полагаю, должна быть понятна. На этом мы завершим текущую статью. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree