Добавление и удаление классов на jQuery
Статья, в которой разберем методы jQuery для управления классами элементов. Рассмотрим это как c использованием универсальных методов (attr()
, removeAttr()
, prop()
), так и методов специально предназначенных для этого: addClass
, hasClass()
, removeClass()
, toggleClass()
.
Что такое классы HTML-элементов?
Класс – это некоторый признак, который можно добавить к элементам, а затем использовать его в CSS (для добавления к ним стилей) или JavaScript.
В HTML-коде установка класса элементу осуществляется через атрибут class
.
Пример, в котором установим HTML-элементу <div>
класс container
:
<div class="container">...</div>
При этом к элементу можно добавить не только один, но и несколько классов. Для установки нескольких классов их необходимо отделить друг от друга с помощью пробела.
Пример, в котором установим <a>
три класса: btn
, btn-red
и btn-large
:
<a class="btn btn-red btn-large" href="...">...</a>
Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис ("-") и подчеркивание ("_").
<!-- Корректное имя класса --> <p class="alert-info">...</p> <!-- Неправильное имя класса, т.к. он не должен начинаться с цифры --> <p class="9alert">...</p> <!-- Ошибочное имя класса, т.к. он содержит недопустимый символ --> <p class="alert?">...</p>
Кроме этого, при указании класса обращайте внимание на то, что он является регистрозависимым. Т.е., например, класс Alert
это не одно и тоже что alert
.
<!-- Элемент p, имеющий класс alert --> <p class="alert">...</p> <!-- Элемент p, имеющий класс Alert. Но Alert - это не одно и то же, что alert --> <p class="Alert">...</p>
Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.
Пример использования классов:
<!-- CSS --> <style> .bg__theme { background-color: #dcedc8; } .bg__theme_hover { background-color: #ffecb3; } </style> <!-- HTML --> <p class="bg__theme">...</p> <p class="bg__theme">...</p> <p class="bg__theme">...</p> <!-- JavaScript --> <script> // Сценарий JavaScript с использованием библиотеки jQuery // при поднесении курсора к элементу .bg__theme к нему добавляется класс bg__theme_hover, а при покидания курсора данный класс удаляется (bg__theme_hover) $('.bg__theme').hover( function () { $(this).addClass('bg__theme_hover'); }, function () { $(this).removeClass('bg__theme_hover'); } ); </script>
Работа с классами через атрибут class
В jQuery выполнить операции над классами элементов можно с помощью методов attr и removeAttr. Данные методы предназначены для работы с любыми атрибутами, а не только с class
.
Основное ограничение данных методов относительно работы с классами связано с тем, что они оперируют с ними как с целой строкой. Т.е. с их помощью, например, нельзя просто добавить какой-то один дополнительный класс к элементу или удалить его у него. Чтобы это выполнить нужно писать какой-то дополнительный код, что не очень удобно. Но если работать с классами элемента не нужно по отдельности, то данные методы будут очень удобными и в этом случае лучше использовать их. Например, когда вам нужно при создании элемента добавить к нему один или несколько классов.
Пример работы с атрибутом class
:
<img id="logo" class="img-responsive" src="..." alt= ""> <script> // получим элемент #logo var logo = $('#logo'); // получим значение атрибута class и выведем его в консоль console.log(logo.attr('class')); // изменим значение атрибута class logo.attr('class', 'img-fluid'); // удалим атрибут class у элемента logo.removeAttr('class'); // или (удалить ещё можно так) logo.attr('class', null); // добавим атрибут класс к элементу logo.attr('class', 'img-logo'); </script>
Работа с классами через 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.
Рассмотрим применения данного метода для управления классами элемента.
<img id="logo" class="img-responsive" src="..." alt= ""> <script> // получим элемент #logo var logo = $('#logo'); // получим значение DOM-свойства className console.log(logo.prop('className')); // кстати в jQuery к нему можно ещё обращаться, используя class console.log(logo.prop('class')); // изменим значение DOM-свойства className logo.prop('className', 'img-fluid'); // удалим классы у элемента logo.prop('class',''); // добавим классы "img-logo img-circle" к элементу logo.prop('className', 'img-logo img-circle'); </script>
Работа с классами через специальные методы
В jQuery имеются специальные методы, предназначенные именно для работы с классами. Всего их четыре. Это addClass
, hasClass
, removeClass
и toggleClass
.
Эти методы очень нужны, когда вам нужно выполнить детальную работу с классами, например, добавить один класс к элементу или его удалить.
Метод addClass
Метод addClass
предназначен для добавления одного или нескольких классов к текущему набору элементов. Данный метод именно добавляет классы. Т.е. если у элемента есть классы, то они будут добавлены к уже существующим.
К сведению, если у элемента уже есть класс, который вы хотите добавить, то в этом случае он добавлен не будет.
Синтаксис метода addClass
:
// 1 вариант .addClass( className ) // className (тип: Строка) - один или несколько разделенных пробелом классов, которые нужно добавить к каждому элементу текущего набора // 2 вариант .addClass( function ) // function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые требуется добавить к каждому элементу текущего набора // Синтаксис функции: // Function( Integer index, String currentClassName ) => String // index – индекс элемента в наборе // currentClassName – текущие имена классов у элемента // Ключевое слово this внутри функции указывает на текущий элемент набора.
Например, добавим класс при клике на элемент:
<div>-1-</div> <div>-2-</div> <div>-3-</div> <script> $('div').click(function(){ $(this).addClass('clicked'); }); </script>
Пример, в котором добавим несколько классов ко всем элементам .btn
на странице:
// добавление классов btn-lg и btn-primary ко всем элементам .btn $('.btn').addClass('btn-lg btn-primary');
Пример, в котором добавим ко всем элементам li
, расположенных в #browsers
, класс browser-item
, но за исключением тех, у которых уже есть какой-то класс:
<ul id="browsers"> <li>Google Chrome</li> <li class="firefox">Mozilla Firefox</li> <li class="ie">Internet Explorer</li> <li>Yandex Browser</li> </ul> <script> $('#briwsers li').addClass( function(index, currentClassName){ if (!currentClassName) { return 'browser-item'; } }); </script>
Метод hasClass
Данный метод предназначен для проверки наличия указанного класса у элемента или набора элементов.
Если указанный класс есть у элемента, то метод hasClass
возвращает true
. В противном случае он возвращает false
.
При применении его к набору элементов, он проверяет наличие указанного класса у всех них. И если указанный класс есть хотя бы у одного элемента этого набора данный метод возвращает true
. В противном случае, он возвращает false
.
Синтаксис метода hasClass
:
.hasClass( className ) // className (тип: Строка) – имя класса, наличие которого нужно проверить у элементов текущего набора
Пример, в котором проверим наличие класса meow
у элемента #say
:
<span id="say" class="moo meow wow"></span> <script> // проверим существования класса meow у элемента if ($('#say').hasClass('meow')) { console.log('У элемента есть класс meow'); } else { console.log('Элемент не содержит класс meow'); } </script>
Если необходимо проверить наличие нескольких классов у элемента, то это выполняются с помощью использования нескольких методов hasClass
:
var result = $('#say').hasClass('meow') && $('#say').hasClass('moo'); console.log(result); // true (у элемента есть классы meow и moo)
Метод removeClass
Метод removeClass
предназначен для удаления класса, нескольких или всех классов у каждого элемента текущего набора.
Синтаксис метода removeClass
:
// 1 вариант .removeClass( [className ] ) // className (тип: Строка) – один или несколько разделённых с помощью пробела классов, которые нужно удалить у элементов набора // 2 вариант .removeClass( function ) // function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые нужно удалить // Синтаксис функции: // Function( Integer index, String className ) => String // index – индекс элемента в наборе // className – имена классов у элемента // Ключевое слово this внутри функции указывает на текущий элемент набора
Если при вызове метода removeClass
ничего ей не передать в качестве аргумента, то она удалит все классы у каждого элемента текущего набора.
Например, удалим класс text-center
у всех элементов p
:
$('p').removeClass('text-center');
Например, уберём сразу несколько классов у элементов div
:
$('div').removeClass('alert alert-warning');
Например, удалим все классы у элементов .message
, контент у которых равен пустой строке:
<div class="message"></div> <div class="message">...</div> <script> $('.message').removeClass(function(){ if (!$(this).html()) { $(this).removeClass(); } }); </script>
Метод toggleClass
Метод toggleClass
предназначен для переключения одного или нескольких классов, разделённых между собой с помощью пробела. Под переключением понимается добавление класса, если у данного элемента его нет или удаление, если этот класс у этого элемента есть.
Синтаксис метода toggleClass
:
// 1 вариант .toggleClass( className ) // className (тип: String) - один или несколько классов (разделенных пробелами), которые необходимо переключить у каждого элемента в текущем наборе. // 2 вариант .toggleClass( className, state ) state (тип: Boolean) – логическое значение, определяющее, должен ли класс быть добавлен или удален // 3 вариант .toggleClass( function [, state ] ) // function - функция, возвращающая одно или несколько разделенных с помощью пробела классов, которые требуется переключить у элемента. В качестве аргументов получает индекс элемента в текущем наборе, текущее значение className и состояние. // Синтаксис функции: Function( Integer index, String className, Boolean state ) => String // index – индекс элемента в текущем наборе // className – текущее значение className элемента // state – значение состояния, установленного посредством второго аргумента при вызове метода toggleClass (если второй аргумент опустить, то данный параметр будет иметь значение undefined) // Внутри функции ключевое слово this указывает на текущий элемент набора
Пример, в котором переключим класс alert-warning
у элементов .alert
:
<div class="alert alert-warning">1...</div> <div class="alert">2...</div> ... <script> $('.alert').toggleClass('alert-warning'); </script>
Данный код без использования метода toggleClass
можно записать так:
$('alert').each( function () { var _this = $('this'); // текущий элемент if (_this.hasClass('alert-warning')) { _this.removeClass('alert-warning'); } else { _this.addClass('alert-warning'); } });
Кроме этого, метод toggleClass
может вести себя как addClass
или removeClass
. Это состояние можно установить посредством задания параметру state
соответственно значения true
или false
.
Т.е. если параметру state
установить true
, то метод toggleClass
будет только добавлять указанный класс к элементу, если у него его нет. И наоборот, если параметру state
задать false
, то метод toggleClass
будет только удалять указанный класс, т.е. он будет вести себя как removeClass
.
Пример, в котором добавим класс text-right только к тем элементам p на странице, у которых его нет:
$('p').toggleClass('text-right', true);
Пример, в котором удалим класс text-center
только у тех элементов div
, у которых он есть:
$('div').toggleClass('text-center', false);
Пример, в котором переключим класс text-lead
с помощью функции. Выполним это для элементов .text
, у которых размер шрифта равен 24px:
<style> .text-24 { font-size: 24px; } .text-lead { color: red; } </style> <p class="text text-24 text-lead">...</p> <p class="text text-lead">...</p> <p class="text" style="font-size: 24px;">...</p> <script> $('.text').toggleClass(function(){ var classToToggle = ''; if ($(this).css('font-size') === '24px') { classToToggle = 'text-lead'; } return classToToggle; }); </script>
Темы, связанные с этой:
$(document).ready(function () {
$(".hs-menubar").hsMenu();
$(".hamburger").click(function(){
$(this).toggleClass(«is-active»);
});
});
Ну, например можно поступить так: в обработчик события, которое закрывает меню при клике по экрану в любом месте вне меню, можно добавить код для вызова некоторого кастомного события:
Для обработки этого события добавить следующий код: