Добавление и удаление классов на 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>

Темы, связанные с этой:

• Методы jQuery для работы с атрибутами
• Методы jQuery для управления DOM-свойствами элементов