Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Управление классами стилей
Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы.
addClass(<Название класса>)
— добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.removeClass([<Название класса>])
— удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы.toggleClass(<Название класса>[, <Условие>])
— добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. Если в необязательном параметре<Условие>
задано значениеtrue
, то указанный класс будет добавлен, а если задано значениеfalse
, то указанный класс будет удален.
Все указанные методы в качестве значения возвращают коллекцию элементов jQuery. Рассмотрим возможность изменения класса при наведении курсора на элемент (листинг 5.2).
Листинг 5.2. Методы addClass(), removeClass() и toggleClass()
<!doctype html>
<html>
<head>
<title>Методы addClass(), removeClass() и toggleClass()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("#div1").hover(
function() { // Если навести курсор
$(this).removeClass().addClass("cls2");
},
function() { // Если убрать курсор
$(this).removeClass().addClass("cls1");
}
);
$("#div2").hover(
function() { // Если навести курсор
$(this).toggleClass("cls2");
},
function() { // Если убрать курсор
$(this).toggleClass("cls2");
}
);
});
</script>
<style>
.cls1 { color:#000000; text-decoration:none; }
.cls2 { color:#ff0000; text-decoration:underline; }
</style>
</head>
<body>
<div id="div1" class="cls1">Наведите курсор на этот текст</div><br>
<div id="div2" class="cls1">Наведите курсор на этот текст</div>
</body>
</html>
В этом примере мы определили два класса cls1
и cls2
. Класс cls1
описывает стиль элемента по умолчанию. Класс cls2
предназначен для описания стиля элемента при наведении курсора. После формирования структуры документа мы добавляем обработчики событий с помощью метода hover()
. В первом параметре указывается функция, которая будет вызвана при наведении курсора. Во втором параметре указывается функция, которая будет вызвана, если курсор убрать с элемента. Внутри этих обработчиков текущий DOM-элемент доступен через указатель this
. Если курсор будет наведен на первую надпись, то удаляем все классы, а затем добавляем класс cls2
.
$(this).removeClass().addClass("cls2");
Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем все классы и добавляем класс по умолчанию.
Вторая надпись демонстрирует применение метода toggleClass()
. Если навести курсор, то метод проверит, был ли класс cls2
добавлен ранее. В случае отсутствия класса он будет добавлен, в противном случае удален. По этой причине во всех событиях мы указываем одну и ту же строку.
$(this).toggleClass("cls2");
Метод hasClass(<Название класса>)
позволяет определить, был ли указанный класс добавлен ранее. Возвращает true
, если класс был добавлен ранее.
function checkClass(cls) {
if ($("#div1").hasClass(cls)) {
alert("Определен");
}
else {
alert("Нет");
}
}
checkClass("cls2"); // Нет
$("#div1").addClass("cls2");
checkClass("cls2"); // Определен
checkClass("cls1"); // Определен
<div id="div1" class="cls1">Текст</div>
При первой проверке получим сообщение, что класс cls2
не определен. Далее добавляем класс и опять проверяем. В этом случае получим сообщение, что класс определен для элемента с идентификатором div1
. Обратите внимание на тот факт, что добавление нового класса не удаляет другие классы, определенные ранее.
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов