Методы управления классами стилей

Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы.

• addClass {<Название   класса>) — добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.


• remove Сlass ( [<Название   класса>] ) — удаляет указанный  класс у всех
элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы.

• toggleClass {<Название  класса> [,   <Условие>] ) — добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. Если в необязательном параметре
<Условие> задано значение true, то указанный класс будет добавлен, а если задано значение false, то указанный класс будет удален.   Все указанные методы в качестве значения возвращают коллекцию элементов jQuery. Рассмотрим возможность изменения класса при наведении курсора на элемент

Листинг 5.2. Методы addClass(), removeClassQ и toggleClass()

<html> <head>
<title>Методы addClass(), removeClass() и toggleClass()</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery, js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { $("#div1").hover(
function() { // Если навести курсор
$(this).removeClass().addClass("cls2");
},
function() { // Если убрать курсор
$(this).removeClass().addClass("clsl");
$("#div2").hover(
function() { // Если навести курсор
$(this).toggleClass("cls2");
},
function() { // Если убрать курсор
$(this).toggleClass ("cls2") ;
}
);
});
</script>
<style>
.clsl { color:#000000; text-decoration:none; }
.cls2 { color:#ff0000; text-decoration:underline; }
</style>
</head>
<body>
<div id="div1">Наведите курсор на этот текст</div><br>
<div id="div2" с1ass="cls1">Наведите курсор на этот Текст</div>
</body>
</html>

В этом примере мы определили два класса clsl и cls2. Класс clsl описывает стиль элемента по умолчанию. Класс cls2 предназначен для описания стиля элемента при наведении курсора. После формирования структуры документа мы добавляем обработчики событий с помощью метода hover (). В первом параметре указывается функция, которая будет вызвана при наведении курсора. Во втором параметре указывается функция, которая будет вызвана, если курсор убрать с элемента. Внутри этих обработчиков текущий DOM-элемент доступен через указатель this. Если курсор будет наведен на первую надпись, то удаляем все классы, а затем добавляем класс cls2.

$(this).removeClass().addClass("cls2");

Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем все классы и добавляем класс по умолчанию.
Вторая надпись демонстрирует применение метода toggleClass (). Если навести курсор, то метод проверит, был ли класс cls2 добавлен ранее. В случае отсутствия класса он будет добавлен, в противном случае удален. По этой причине во всех событиях мы указываем одну и ту же строку.

$(this).toggleClass("cls2");

Метод hasClass (<Название класса>) позволяет определить, был ли указанный класс добавлен ранее. Возвращает true, если класс был добавлен ранее.

function checkClass(сls) {
if ($("#div1").hasClass(сls)) {
alert("Определен");
} else {
alert("Нет");
}
}
checkClass("cls2");   //  Нет
$("#div1").addClass("cls2");
checkClass("cls2");   //  Определен
checkClass("clsl");   //  Определен

<div  id="div1"  >Текст</div>

При первой проверке получим сообщение, что класс cls2 не определен. Далее добавляем класс и опять проверяем. В этом случае получим сообщение, что класс определен для элемента с идентификатором div1. Обратите внимание на тот факт, что добавление нового класса не удаляет другие классы, определенные ранее.

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

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