Как добавить класс jquery
Для добавления к элементу класса применяется метод addClass(‘названия_классов’) , который в качестве параметра принимает название класса. Поскольку для одного элемента можно определить несколько классов, то и в данном случае мы можем передать в метод addClass строку, содержащую несколько классов, разделенных пробелами:
Удаление класса
Для удаления класса используется метод removeClass(‘названия_классов’) . Данный метод также принимает набор имен классов, разделенных пробелами. И если у элемента имеется такой класс, то он удаляется:
Проверка классов. Метод hasClass
Нередко бывает нужно проверить, имеет ли тот или иной элемент какой-нибудь класс, особенно это бывает необходимо, если классы добавляются динамически. В этом случае нам может помочь метод hasClass(‘названия_классов’) . И если содержит класс, то данный метод возвращает true, иначе false.
Переключение классов
Переключение классов осуществляется с помощью метода toggleClass(‘название_класса’) . В качестве параметра принимается название класса, который будет присвоен элементу. Например, сделаем переключение класса у кнопки по ее нажатию:
Здесь мы на кнопку вешаем обработчик события click . Сам обработчик передается в виде функции в качестве параметра. В этой функции переключаем класс redStyle с помощью метода toggleClass(«redStyle») — если класс есть, он удаляется, а если его нет, то он добавляется.
.addClass()
Описание: Добавляет класс(ы) выбранным элементам страницы. Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их.
Добавлен в версии: 1.0 .addClass( className )
Добавлен в версии: 1.4 .addClass( function )
It’s important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.
Before jQuery version 1.12/2.2, the .addClass() method manipulated the className property of the selected elements, not the class attribute. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).
As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the class attribute is used instead. So, .addClass() can be used on XML or SVG documents.
More than one class may be added at a time, separated by a space, to the set of matched elements, like so:
This method is often used with .removeClass() to switch elements’ classes from one to another, like so:
Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.
As of jQuery 1.4, the .addClass() method’s argument can receive a function.
Given an unordered list with two <li> elements, this example adds the class «item-0» to the first <li> and «item-1» to the second.
- Ajax
- Глобальные Ajax события
- Вспомогательные методы
- Низкоуровневый интерфейс
- Сокращенные методы
- Базовые
- Пользовательские
- Затухание
- Скольжение
- События браузера
- Загрузка документа
- Прикрепление обработчиков
- Объект событие
- События формы
- События клавиатуры
- События мыши
- Class атрибут
- Копирование
- DOM Вставка вокруг
- DOM Вставка внутрь
- DOM Вставка вне
- DOM Удаление
- DOM Замена
- Общие аттрибуты
- Свойства стилей
- Манипуляция коллекциями
- Хранилище данных
- DOM методы элементов
- Методы установки
- Экземпляр объекта jQuery
- Глобальный объект jQuery
- Атрибут
- Базовые
- Базовые фильтры
- Фильтры потомков
- Фильтры содержимого
- Форма
- Иерархия
- jQuery расширение
- Фильтр видимости
- Фильтрация
- Обход
- Обход элементов
- Версия 1.3
- Версия 1.7
- Версия 1.8
- Версия 1.9
- Версия 1.10
- Версия 3.0
Русская документация по jQuery.
При использовании любых материалов с сайта ссылка на сайт обязательна.Классы
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Несмотря на то что для работы с классами можно использовать общие методы, предназначенные для работы с атрибутами, в jQuery предусмотрены намного более удобные методы, специально предназначенные для этой цели. Их краткое описание приведено в таблице ниже:
Методы для работы с классами
Метод Описание addClass(имя имя . ) Добавляет один или несколько классов с указанными именами во все элементы, содержащиеся в объекте jQuery addClass(функция) Добавляет классы, список которых возвращает указанная функция, во все элементы, содержащиеся в объекте jQuery hasClass(имя) Возвращает true, если хотя бы один из элементов, содержащихся в объекте jQuery, принадлежит указанному классу removeClass(имя имя . ) Удаляет один или несколько классов с указанными именами из всех элементов, содержащихся в объекте jQuery removeClass(функция) Удаляет классы, список которых возвращает указанная функция, из всех элементов, содержащихся в объекте jQuery toggleClass() Переключает все классы, которым принадлежат элементы, содержащиеся в объекте jQuery toggleClass(логическое_значение) Осуществляет одностороннее переключение всех классов, которым принадлежат элементы, содержащиеся в объекте jQuery toggleClass(имя), toggleClass(имя имя . ) Переключает один или несколько классов с указанными именами для всех элементов, содержащихся в объекте jQuery toggleClass(имя, логическое_ значение) Осуществляет одностороннее переключение класса с указанным именем для всех элементов, содержащихся в объекте jQuery toggleClass(функция, логическое значение) Динамически переключает классы для всех элементов, содержащихся в объекте jQuery Можно добавлять классы в элементы, используя метод addClass(), или удалять классы, используя метод removeClass(), а также проверять принадлежность элемента определенному классу, используя метод hasClass(). Пример использования этих методов приведен ниже:
В начале этого фрагмента кода помещен элемент style, содержащий определения двух стилей, применение которых зависит от принадлежности элемента определенному классу. Привлекать классы для управления CSS вовсе не обязательно, однако их использование позволяет упростить демонстрацию эффектов анимации.
Сценарий начинается с выбора всех элементов img в документе и присвоения им класса redBorder с помощью метода addClass(). Затем мы выбираем четные элементы img, удаляем их из класса redBorder и присваиваем им класс blueBorder, используя метод removeClass(). Обратите внимание, что метод addClass() не удаляет существующие классы из элементов, а лишь добавляет новые классы в дополнение к тем, которые были применены к элементам ранее.
Наконец, мы используем метод hasClass() для проверки на принадлежность классу redBorder как всего выбранного набора в целом (этот метод возвращает true, если хотя бы один элемент набора имеет указанный класс), так и каждого элемента img по отдельности. Вид страницы в окне браузера приведен на рисунке:
При этом на консоль выводится следующий результат:
Добавление и удаление классов с помощью функции
Классы можно динамически добавлять или удалять из набора элементов, передавая методам addClass() и removeClass() функцию в качестве аргумента. Пример использования функции совместно с методом addClass() приведен ниже:
Аргументами функции являются индекс элемента в наборе выбранных элементов, а также текущий набор классов, членом которых является данный элемент. Как и в случае других аналогичных функций, переменная this ссылается на объект HTMLElement текущего обрабатываемого элемента. Функция должна возвращать класс, к которому требуется присоединить элемент. В данном примере решение о том, какой именно из классов следует назначить элементу — redBorder или blueBorder, — принимается на основании значения аргумента index. Вид страницы в окне браузера будет тем же, что и на предыдущем рисунке.
Переключение отдельного класса
В своей простейшей форме переключение класса означает добавление указанного класса, если элемент не имеет данного класса, или удаление класса, если элемент имеет данный класс. Это достигается передачей методу toggleClass() имени класса, как показано в примере ниже:
Этот сценарий начинается с присвоения класса redBorder нечетным элементам img, а класса blueBorder — четным. Затем мы создаем элемент button и присоединяем его к элементу с атрибутом id, равным buttonDiv. В результате этого новая кнопка располагается рядом с уже имеющейся на странице кнопкой «Заказать». Функция, которую jQuery должна вызывать после щелчка на кнопке, задается с помощью метода click().
Ключевая инструкция функции doToggle(), которая вызывается после щелчка на кнопке, выглядит так:
Она выбирает все элементы img в документе и управляет переключением класса redBorder. Аргумент функции doToggle() и вызов метода preventDefault() интереса для нас пока что не представляют.
Теперь, при переключении, у элементов, заключенных в красную рамку, рамка исчезает, а элементы, которые были первоначально заключены в синюю рамку, таковыми и остаются. Суть происходящего состоит в том, что jQuery, как и следовало ожидать, удаляет класс redBorder из нечетных элементов img и добавляет его в четные элементы, но элемент, к которому добавляется класс redBorder, является также членом класса blueBorder. Стиль blueBorder определен в элементе style после стиля redBorder, откуда следует, что значения его свойств имеет более высокий приоритет. Поэтому переключение классов работает, но при этом должны учитываться также некоторые тонкости функционирования CSS.
Переключение одновременно нескольких классов
Если методу toggleClass передается список имен классов, разделенных пробелами, то соответствующее переключение будет выполнено для каждого из элементов выбранного набора. Один из примеров того, как можно сделать, приведен ниже:
В этом примере для всех элементов img осуществляется переключение классов redBorder и blueBorder. Теперь при щелчке на кнопке будут меняться цвета всех рамок.
Переключение всех классов
Можно переключить сразу все классы, которым принадлежит набор элементов, вызвав метод toggleClass() без аргументов. Это более «умный» прием, поскольку jQuery сохраняет информацию о переключаемых классах, так что они присваиваются и удаляются корректно. Пример использования этой методики приведен ниже:
В этом примере метод addClass() используется для добавления классов во все элементы img и label. После щелчка на кнопке «Переключить» осуществляется выбор указанных элементов и вызывается метод toggleClass() без аргументов.
После первого щелчка на кнопке из выделенных элементов удаляются все классы, однако jQuery запоминает, какие классы были удалены, и поэтому может присвоить их элементам заново после выполнения повторного щелчка.
Одностороннее переключение классов
Процессом переключения классов (т.е. их добавлением, если их нет, или удалением, если они есть) можно управлять, передавая методу toggleClass() логическое (булево) значение в качестве аргумента. Если передается значение false, то классы будут только удаляться, если true — только добавляться. Того же эффекта можно добиться совместным использованием методов addClass() и removeClass(), и поэтому данной возможностью я пользуюсь относительно редко.
Динамическое переключение классов
Решение о том, на какие классы должно воздействовать переключение, может приниматься «на лету» за счет передачи методу toggleClass() функции обратного вызова. Простой пример того, как это можно сделать, приведен ниже:
Здесь класс redBorder применяется ко всем элементам img, а класс blueBorder — только к четным. Аргументами, которые передаются функции, являются индекс текущего обрабатываемого элемента и текущий набор классов, которым он принадлежит. Переменная this ссылается на объект HTMLElement текущего элемента. Результатом, который возвращает функция, является список имен классов, переключение которых следует выполнить. Если переключение классов не требуется, функция должна возвратить пустую строку (отсутствие возвращаемого функцией результата для какого-либо элемента приводит к переключению всех его классов).