Использование классов в jQuery

Добавление класса

Для добавления к элементу класса применяется метод addClass('названия_классов'), который в качестве параметра принимает название класса. Поскольку для одного элемента можно определить несколько классов, то и в данном случае мы можем передать в метод addClass строку, содержащую несколько классов, разделенных пробелами:

$('ul').first().addClass("redStyle");
// добавление двух классов
$('div').first().addClass("black visible");

Удаление класса

Для удаления класса используется метод removeClass('названия_классов'). Данный метод также принимает набор имен классов, разделенных пробелами. И если у элемента имеется такой класс, то он удаляется:

$('div').first().removeClass("black visible");

Проверка классов. Метод hasClass

Нередко бывает нужно проверить, имеет ли тот или иной элемент какой-нибудь класс, особенно это бывает необходимо, если классы добавляются динамически. В этом случае нам может помочь метод hasClass('названия_классов'). И если содержит класс, то данный метод возвращает true, иначе false.

if($('ul').first().hasClass("redStyle")){
	console.log('Список содержит класс redStyle');
}
else{
	console.log('Список не содержит класс redStyle');
}

Переключение классов

Переключение классов осуществляется с помощью метода toggleClass('название_класса'). В качестве параметра принимается название класса, который будет присвоен элементу. Например, сделаем переключение класса у кнопки по ее нажатию:

<style>
.redStyle {color:red;}
</style>
<!------------------------------------------->
<button class="redStyle">Переключить стиль</button>
<script type="text/javascript">
$(function(){
		$('button').click(function(){
			$(this).toggleClass("redStyle");
		}
	});
});
</script>

Здесь мы на кнопку вешаем обработчик события click. Сам обработчик передается в виде функции в качестве параметра. В этой функции переключаем класс redStyle с помощью метода toggleClass("redStyle") - если класс есть, он удаляется, а если его нет, то он добавляется.