Добавление класса
.addClass()
Добавляет класс(ы) выбранным элементам страницы. Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их. Функция имеет два варианта использования:
.addClass("clName1 clName2 ..."):jQuery1.0
добавляет классы clName1, clName2, ... всем выбранным элементам.
.addClass(function(index, class)):jQuery1.4
добавляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку, с перечислением добавляемых классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, class — текущий класс(ы) элемента.
Примеры использования:
$("#content").addClass("blackZone") | добавит класс blackZone элементу с идентификатором content |
$(".content").addClass("blackZone") | добавит класс blackZone всем элементам с классом content (то есть, у этих элементов станет по меньшей мере два класса: class="content blackZone". |
В действии
Добавим всем div-элементам на странице класс dotted, для добавления точечной красной рамки:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div{ display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; font-size: 20pt; } .green{background-color: #66ff66;} .gray{background-color: #aaa;} .dotted{border:2px dotted red} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div~gt~ 1 ~lt~/div~gt~ ~lt~div class="gray"~gt~ 2 ~lt~/div~gt~ ~lt~div class="green"~gt~ 3 ~lt~/div~gt~ ~lt~script~gt~ $("div").addClass("dotted"); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
См. также
- .removeClass( ) — удаление класса
- .toggleClass( ) — изменение наличия класса