Управление классами стилей
Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы.
- addClass(<Название класса>) — добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.
- removeClass([<Название класса>]) — удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы.
- toggleClass(<Название класса>[, <Условие>]) — добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. Если в необязательном параметре <Условие> задано значение true, то указанный класс будет добавлен, а если задано значение false, то указанный класс будет удален.
Все указанные методы в качестве значения возвращают коллекцию элементов jQuery. Рассмотрим возможность изменения класса при наведении курсора на элемент (листинг 5.2).
Листинг 5.2. Методы addClass(), removeClass() и toggleClass()
<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.
Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем все классы и добавляем класс по умолчанию.
Вторая надпись демонстрирует применение метода toggleClass(). Если навести курсор, то метод проверит, был ли класс cls2 добавлен ранее. В случае отсутствия класса он будет добавлен, в противном случае удален. По этой причине во всех событиях мы указываем одну и ту же строку.
Метод hasClass(<Название класса>) позволяет определить, был ли указанный класс добавлен ранее. Возвращает true, если класс был добавлен ранее.
if ($("#div1").hasClass(cls)) {
alert("Определен");
}
else {
alert("Нет");
}
}
checkClass("cls2"); // Нет
$("#div1").addClass("cls2");
checkClass("cls2"); // Определен
checkClass("cls1"); // Определен
При первой проверке получим сообщение, что класс cls2 не определен. Далее добавляем класс и опять проверяем. В этом случае получим сообщение, что класс определен для элемента с идентификатором div1. Обратите внимание на тот факт, что добавление нового класса не удаляет другие классы, определенные ранее.
 |
 |
 |