.addClass()
Добавляет класс(ы) каждому выбранному элементу страницы.
version added: 1.0 .addClass( className )
className
Тип: Строка
Имя класса(или имена классов, через пробел), которое требуется добавить к связанному элементу.
version added: 1.4 .addClass( function(index, currentClass) )
function(index, currentClass)
Тут важно заметить, что данный метод не замещает классы. Он просто добавляет класс, к уже существующим.
Одновременно может быть добавлен один и более классов, разделённые через пробел:
Часто в связке с данным методом, используется .removeClass() для удаления одних классов и добавления других:
В данном примере у параграфа удаляются элементы myClass и noClass; добавляется класс yourClass.
Начиная с jQuery 1.4, метод.addClass() в качестве аргумента может принимать функцию.
Дан ненумерованный список из двух <li> элементов. В данном примере, к первому элементу будет добавлен класс «item-0», а ко второму <li> «item-1».
Примеры
Пример: Добавляем класс “selected” к элементам, подходящим под селектор.
Демо:
Пример: Добавляем класс “selected” и “highlight” к элементам, подходящим под селектор.
Демо:
Пример: Передаём в .addClass() функцию, которая вычислит элемент у которого есть класс “red” и прибавит к нему класс “green”.
Демо:
Связанные уроки:
Используем jQuery для изменения стилей поля ввода формы при нажатии
Многие формы на сайтах скучные и простые, не позвольте Вашей форме быть такой же. Посмотрите этот урок и вдохните жизнь в Ваши формы.
Фон, который всегда растягивается на всю страницу
Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.
Адаптивная галерея изображений
В данном уроке мы разберемся, как создать адаптивную галерею изображений с каруселью миниатюр. Галерея будет подстраиваться под размер окна просмотра, также можно будет отключить или включить карусель миниатюр. Навигация может осуществляться с клавиатуры.
Как добавить класс jquery
Для добавления к элементу класса применяется метод addClass(‘названия_классов’) , который в качестве параметра принимает название класса. Поскольку для одного элемента можно определить несколько классов, то и в данном случае мы можем передать в метод addClass строку, содержащую несколько классов, разделенных пробелами:
Удаление класса
Для удаления класса используется метод removeClass(‘названия_классов’) . Данный метод также принимает набор имен классов, разделенных пробелами. И если у элемента имеется такой класс, то он удаляется:
Проверка классов. Метод hasClass
Нередко бывает нужно проверить, имеет ли тот или иной элемент какой-нибудь класс, особенно это бывает необходимо, если классы добавляются динамически. В этом случае нам может помочь метод hasClass(‘названия_классов’) . И если содержит класс, то данный метод возвращает true, иначе false.
Переключение классов
Переключение классов осуществляется с помощью метода toggleClass(‘название_класса’) . В качестве параметра принимается название класса, который будет присвоен элементу. Например, сделаем переключение класса у кнопки по ее нажатию:
Здесь мы на кнопку вешаем обработчик события click . Сам обработчик передается в виде функции в качестве параметра. В этой функции переключаем класс redStyle с помощью метода toggleClass(«redStyle») — если класс есть, он удаляется, а если его нет, то он добавляется.
How to add class using jQuery?
I made a small function whose work to do add class in <li> when we clicks on < li> , but I want to remove that if it is already had with <li> .
4 Answers 4
You can just use toggleClass this will add or remove it as necessary
if you want to remove this class from elsewhere, you can add an extra line:
Use the jquery function .toggleClass .
Better we can use .on() or .delgate() methods:
Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks. In particular, the following issues arise with the use of .live():
Добавление и удаление классов на jQuery
Статья, в которой разберем методы jQuery для управления классами элементов. Рассмотрим это как c использованием универсальных методов ( attr() , removeAttr() , prop() ), так и методов специально предназначенных для этого: addClass , hasClass() , removeClass() , toggleClass() .
Что такое классы HTML-элементов?
Класс – это некоторый признак, который можно добавить к элементам, а затем использовать его в CSS (для добавления к ним стилей) или JavaScript.
В HTML-коде установка класса элементу осуществляется через атрибут class .
Пример, в котором установим HTML-элементу <div> класс container :
При этом к элементу можно добавить не только один, но и несколько классов. Для установки нескольких классов их необходимо отделить друг от друга с помощью пробела.
Пример, в котором установим <a> три класса: btn , btn-red и btn-large :
Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис («-«) и подчеркивание («_»).
Кроме этого, при указании класса обращайте внимание на то, что он является регистрозависимым. Т.е., например, класс Alert это не одно и тоже что alert .
Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.
Пример использования классов:
Работа с классами через атрибут class
В jQuery выполнить операции над классами элементов можно с помощью методов attr и removeAttr. Данные методы предназначены для работы с любыми атрибутами, а не только с class .
Основное ограничение данных методов относительно работы с классами связано с тем, что они оперируют с ними как с целой строкой. Т.е. с их помощью, например, нельзя просто добавить какой-то один дополнительный класс к элементу или удалить его у него. Чтобы это выполнить нужно писать какой-то дополнительный код, что не очень удобно. Но если работать с классами элемента не нужно по отдельности, то данные методы будут очень удобными и в этом случае лучше использовать их. Например, когда вам нужно при создании элемента добавить к нему один или несколько классов.
Пример работы с атрибутом class :
Работа с классами через DOM-свойство className
Другой вариант – это работать с классами элемента не через атрибут class , а через DOM-свойство className . Этот вариант более предпочтительный чем вариант работы с классами через атрибут class . Но он также, как и предыдущий инструмент позволяет оперировать с ними, только как с целой строкой. Более подробно почитать про атрибуты и DOM-свойства можно в этой статье.
Если кратко, то сначала нужно разобраться что такое DOM.
DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.
При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут class и соответствующее ему DOM-свойство className нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия className . В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.
В jQuery для работы с DOM-свойствами используется метод prop.
Рассмотрим применения данного метода для управления классами элемента.
Работа с классами через специальные методы
В jQuery имеются специальные методы, предназначенные именно для работы с классами. Всего их четыре. Это addClass , hasClass , removeClass и toggleClass .
Эти методы очень нужны, когда вам нужно выполнить детальную работу с классами, например, добавить один класс к элементу или его удалить.
Метод addClass
Метод addClass предназначен для добавления одного или нескольких классов к текущему набору элементов. Данный метод именно добавляет классы. Т.е. если у элемента есть классы, то они будут добавлены к уже существующим.
К сведению, если у элемента уже есть класс, который вы хотите добавить, то в этом случае он добавлен не будет.
Синтаксис метода addClass :
Например, добавим класс при клике на элемент:
Пример, в котором добавим несколько классов ко всем элементам .btn на странице:
Пример, в котором добавим ко всем элементам li , расположенных в #browsers , класс browser-item , но за исключением тех, у которых уже есть какой-то класс:
Метод hasClass
Данный метод предназначен для проверки наличия указанного класса у элемента или набора элементов.
Если указанный класс есть у элемента, то метод hasClass возвращает true . В противном случае он возвращает false .
При применении его к набору элементов, он проверяет наличие указанного класса у всех них. И если указанный класс есть хотя бы у одного элемента этого набора данный метод возвращает true . В противном случае, он возвращает false .
Синтаксис метода hasClass :
Пример, в котором проверим наличие класса meow у элемента #say :
Если необходимо проверить наличие нескольких классов у элемента, то это выполняются с помощью использования нескольких методов hasClass :
Метод removeClass
Метод removeClass предназначен для удаления класса, нескольких или всех классов у каждого элемента текущего набора.
Синтаксис метода removeClass :
Если при вызове метода removeClass ничего ей не передать в качестве аргумента, то она удалит все классы у каждого элемента текущего набора.
Например, удалим класс text-center у всех элементов p :
Например, уберём сразу несколько классов у элементов div :
Например, удалим все классы у элементов .message , контент у которых равен пустой строке:
Метод toggleClass
Метод toggleClass предназначен для переключения одного или нескольких классов, разделённых между собой с помощью пробела. Под переключением понимается добавление класса, если у данного элемента его нет или удаление, если этот класс у этого элемента есть.
Синтаксис метода toggleClass :
Пример, в котором переключим класс alert-warning у элементов .alert :
Данный код без использования метода toggleClass можно записать так:
Кроме этого, метод toggleClass может вести себя как addClass или removeClass . Это состояние можно установить посредством задания параметру state соответственно значения true или false .
Т.е. если параметру state установить true , то метод toggleClass будет только добавлять указанный класс к элементу, если у него его нет. И наоборот, если параметру state задать false , то метод toggleClass будет только удалять указанный класс, т.е. он будет вести себя как removeClass .
Пример, в котором добавим класс text-right только к тем элементам p на странице, у которых его нет:
Пример, в котором удалим класс text-center только у тех элементов div , у которых он есть:
Пример, в котором переключим класс text-lead с помощью функции. Выполним это для элементов .text , у которых размер шрифта равен 24px: