jQuery метод .addClass()
jQuery метод .addClass() добавляет один или несколько имен классов для выбранных элементов. Метод может быть также использован в документах XML и формате SVG.
Обращаю Ваше внимание, что этот метод не заменяет, а добавляет класс (присоединяет к указанным элементам). Чтобы добавить к элементу несколько классов, то необходимо перечислить их через пробел.
Удаление класса, либо классов элемента Вы можете произвести с использованием jQuery метода .removeClass().
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
- index — возвращает индекс позиции элемента в наборе (среди выбранных элементов).
- currentClassName — возвращает текущее имя класса выбранного элемента.
Пример использования
В этом примере с использованием jQuery метода .addClass() мы добавляем два класса к элементу <p> (абзац) по которому произведён клик.
Результат нашего примера:
Пример добавления класса к элементу (jQuery метод .addClass())
Рассмотрим пример в котором в качестве параметра метода .addClass() передадим функцию:
В этом примере с использованием jQuery метода .addClass() мы нашли все элементы <p> (абзац), которые имеют класс «redColor» , добавили для этих элементов класс «greenColor» и с использованием метода .append() добавили в элемент <div> информацию о индексе элементов, которые были выбраны.
Результат нашего примера:
Пример получение индекса и имени класса элемента в наборе с использованием метода .addClass(). jQuery DOM методы
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 addClass() Method
The addClass() method adds one or more class names to the selected elements.
This method does not remove existing class attributes, it only adds one or more class names to the class attribute.
Tip: To add more than one class, separate the class names with spaces.
Syntax
- index — Returns the index position of the element in the set
- currentclass — Returns the current class name of the selected element
Try it Yourself — Examples
Add two classes to an element
How to add two class names to a specified element.
Add classes using a function
How to add classes to selected elements using a function.
Change the class name of an element
How to use addClass() and removeClass() to remove one class name, and add a new class name.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Добавление и удаление классов на 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: