От автора: приветствую вас, друзья. В этой статье мы познакомимся с методом attr в jQuery и узнаем, как работать с атрибутами элементов в jQuery, а также узнаем дополнительные способы управления оформлением элементов, помимо метода css.
В предыдущей статье мы познакомились с методом css в jQuery, благодаря которому можно получать или изменять свойства css у элемента и, соответственно, оформлять элемент. Однако метод css — не единственный способ работы с оформлением элемента. Давайте познакомимся с другими возможностями и начнем с методов, которые позволяют манипулировать классами элементов.
Допустим у нас есть кнопка:
|
1 |
<button>Кнопка</button> |
И пара классов, которые можно использовать для оформления кнопки:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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:
|
1 |
$('button').addClass('btn'); |
Нам не пришлось писать стили в коде JS, достаточно всего-то присвоить существующий класс CSS и описанные в нем стили будут применены к элементу. Это достаточно удобно, поскольку если мы в дальнейшем захотим изменить оформление элемента, нам не нужно будет лезть в код jQuery, достаточно будет сделать изменения в файле стилей.
Если нам нужно добавить более одного класса, тогда мы просто перечислим нужный набор классов через пробел, точно так же, как это делается в коде HTML:
|
1 |
$('button').addClass('btn btn-success'); |
Метод removeClass имеет аналогичный синтаксис, но работает с точностью до наоборот, т.е. удаляет один или больше классов у элементов. Попробуйте проверить это самостоятельно.
И еще пара незаменимых методов, которые мы положим в копилку, методы attr() и removeAttr. Первый метод позволяет получить или установить значение любого атрибута элемента, второй — удаляет указанный атрибут.
Благодаря этим методам мы можем манипулировать абсолютно любыми атрибутами элементов: src, alt, width, height и т.д. у тега img, href — у тега ссылки и прочими. Для примера возьмем ту же кнопку:
|
1 |
<button class="btn btn-success">Кнопка</button> |
И получим значение ее атрибута class (это ведь также атрибут любого элемента):
|
1 2 |
var btn = $('button').attr('class'); console.log(btn); |
Работает! Ну а коль мы можем получить значение атрибута класс, значит, можем и изменить или установить его. Например, если для кнопки не назначен класс, тогда мы можем это сделать, использовав метод attr:
|
1 |
$('button').attr('class', 'btn btn-success'); |
Или же, наоборот, можем удалить значение указанного атрибута:
|
1 |
$('button').removeAttr('class'); |
Конечно, для манипулирования классами логичнее использовать специальные методы addClass и removeClass, но суть работы метода attr, полагаю, должна быть понятна. На этом мы завершим текущую статью. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
