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

38

Від автора: вітаю вас, друзі. У цій статті ми познайомимося з методом attr в jQuery і дізнаємося, як працювати з атрибутами елементів в jQuery, а також дізнаємося додаткові способи управління оформленням елементів, крім методу css.

У попередній статті ми познайомилися з методом css в jQuery, завдяки яким можна отримувати або змінювати властивості css у елемента і, відповідно, оформляти елемент. Однак метод css — не єдиний спосіб роботи з оформленням елемента. Давайте познайомимося з іншими можливостями і почнемо з методів, які дозволяють маніпулювати класами елементів.

Припустимо у нас є кнопка:

Кнопка

Работа с атрибутами элемента в 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 — у тега посилання та іншими. Для прикладу візьмемо ту ж кнопку:

Кнопка

І отримаємо значення її атрибут class (адже це також атрибут будь-якого елементу):

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

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

Працює! Ну а якщо ми можемо отримати значення атрибута клас, значить, можемо змінити або встановити його. Наприклад, якщо кнопки не призначений клас, тоді ми можемо це зробити, використавши метод attr:

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

Або ж, навпаки, можемо видалити значення зазначеного атрибута:

$(‘button’).removeAttr(‘class’);

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