CSS классы
Ну, вроде с CSS разобрались, хотя нет — стоит ещё описать манипуляции с классами, тоже из разряда первичных навыков:
addClass(className)добавление класса элементу
addClass(function(index, currentClass){
return className
})добавление класса с помощью функции обратного вызова
hasClass(className)проверка на причастность к определённому классу
removeClass(className)удаление класса
removeClass(function(index, currentClass){
return className
})удаление класса с помощью функции обратного вызова
toggleClass(className)переключение класса
toggleClass(className, state)переключение класса по флагу state
toggleClass(function(index, currentClass, state) {
return className
}, state)переключение класса с помощью функции обратного вызова, флаг state опционален
Мне ни разу не приходилось использовать данные методы с функциями обратного вызова, и лишь единожды пригодился флаг «
state», так что не заморачивайтесь всё это запоминать, да и в дальнейшем, цитируя руководство по jQuery, я буду сознательно опускать некоторые «возможности».
Но хватит заниматься переводом официальной документации, перейдем к наглядным примерам.
В первую очередь — добавление классов:
// добавляем класс «active»
$("#my").addClass("active")
// добавляем несколько классов за раз
$("#my").addClass("active notice")Переключение классов так же востребованный метод:
// переключаем класс «active»:
// - удаляем класс, если он есть
// - добавляем, если его нет
$("#my").toggleClass("active")
// переключаем несколько классов
$("#my").toggleClass("active notice")Работает переключение нескольких классов следующим образом:
<div id="my" class="active notice"> → <div id="my" class="">
<div id="my" class="active"> → <div id="my" class="notice">
<div id="my" class=""> → <div id="my" class="active notice">Ну и примеры с удалением, для полного комплекта, так сказать:
// удаляем класс «active»
$("#my").removeClass("active")
// удаляем несколько классов за раз
$("#my").removeClass("active notice")Наглядный интерактивный пример:
Last updated