Получение и изменение CSS-классов

Как мы убедились в предыдущих главах, управлять контентом и атрибутами элементов очень легко - и так же легко задавать им CSS-стили. jQuery дает простой доступ как и изменению атрибута style, которым можно управлять с помощью метода css(), так и классов элемента, для чего существует несколько разных методов.

Давайте начнем с того, что посмотрим как изменить атрибут class. Этот атрибут может содержать одно или несколько имен классов, которые могут соотноситься или не соотноситься с CSS-классами, объявленными в таблице стилей. Обычно они совпадают, но время от времени имена классов добавляют только для доступа к элементу из jQuery, т.к. jQuery обеспечивает великолепную поддержку доступа к элементам по имени класса.

Я определил пару очень простых селекторов CSS в своих таблицах стилей, в основном для целей тестирования:

.bold {
	font-weight: bold;
}

.blue {
	color: blue;
}

В следующем примере воспользуемся тремя наиболее интересными методами классов: hasClass() - "имеет класс", который проверяет, заданы ли указанные классы для одного или нескольких элементов, addClass() - "добавить класс", который просто добавляет имя класса одному или несколькими элементами, и removeClass() - "удалить класс", который... ну, я думаю, вы уже поняли.

<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>

<script type="text/javascript">
function ToggleClass(sender)
{
	
	if($(sender).hasClass("bold"))
		$(sender).removeClass("bold");
	else
		$(sender).addClass("bold");
}
</script>

Этот пример очень прост. Когда по ссылке кликают, мы передаем саму ссылку (this) как параметр методу ToggleClass(), который мы объявили. В нем мы проверяем, есть ли уже у переданного объекта (sender) класс "bold", и если есть - мы убираем его, а если нет - добавляем. Это довольно распространенная задача, так что авторы jQuery решили не заставлять нас писать целых три строки кода. Поэтому они уже реализовали метод toggleClass(), с которым мы можем превратить весь предыдущий пример в одну строку кода:

<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Конечно, мы можем выбрать несколько элементов, а также добавить или удалить им несколько классов. Вот пример такого использования:

<div id="divTestArea1">
	<span>Test 1</span><br />
	<div>Test 2</div>
	<b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
	$("#divTestArea1 span, #divTestArea1 b").addClass("blue");
	$("#divTestArea1 div").addClass("bold blue");
});
</script>

В начале, мы выбираем теги span и b, к которым мы добавляем один класс bold. Затем мы выбираем тег div, к которому мы добавляем два класса, разделенных пробелами: bold и blue. Метод removeClass() работает точно так же, позволяя вам задать несколько классов для удаления, разделенных пробелами.