Изменение атрибута "class" через jQuery (addClass, removeClass, hasClass)

В jQuery методы, которые приспособлены для работы с классами: addClass, removeClass, hasClass. Конечно, можно использовать метод attr для изменения классов, но он заменяет все существующие классы. Поэтому вместо attr лучше использовать методы, которые автоматически вычисляют какие классы уже есть и добавляют/убирают нужные/ненужные. Разберём их по порядку.

Добавление класса (addClass)

Приведём пример добавления класса с помощью метода addClass. Этому методу в качестве параметра передаётся название класса. Метод автоматически вычисляет есть ли у элемента такой класс и добавляет его, если ещё нет:

<div id="mouse"></div>
<script>
   $('#mouse').addClass('cheese');
</script>

Как видно из примера, атрибута "class" ещё нет у элемента "div". Но после применения метода "addClass" он будет создан и HTML код страницы изменится на:

<div class="cheese" id="mouse"></div>

Добавим сразу второй класса, чтобы продемонстрировать, что существующие классы не затираются, как это происходит при использовании attr:

<div class="cheese" id="mouse"></div>
<script>
   $('#mouse').addClass('cat');
</script>

При выполнении такого кода получится HTML код:

<div class="cheese cat" id="mouse"></div>

Удаление класса (removeClass)

Метод "removeClass" удаляет определённый класс у элемента, но оставляет остальные. Для демонстрации возьмём HTML код из предыдущего примера и попробуем удалить определённый класс:

<div class="cheese cat" id="mouse"></div>
<script>
   $('#mouse').removeClass('cheese');
</script>

При выполнении такого кода получится HTML код:

<div class="cat" id="mouse"></div>

Удален только один класс "cheese", который запрашивался.

Включить/выключить класс (toggleClass)

Существует метод "toggleClass", который работает как "addClass" и "removeClass" одновременно. Если класс существует, то он будет убран. А если класса нет, то он будет добавлен. Такая логика хорошо применима к различным кнопкам-тумблерам с двумя позициями "вкл/выкл". С помощью этого метода их легко запрограммировать. Попробуем метод на практике:

<div class="cheese cat" id="mouse"></div>
<script>
   $('#mouse').toggleClass('cheese');
   $('#mouse').toggleClass('milk');
</script>

Поскольку класс "cheese" уже есть, то он будет убран. А класс "milk" будет добавлен, потому что его нет. При выполнении такого кода получится HTML код:

<div class="cat milk" id="mouse"></div>

Проверка существования класса (hasClass)

В наборе jQuery есть несколько удобных методов для работы с классами. Один из ни "hasClass", который возвращает "true" или "false" в зависимости от того, есть ли у элемента класс. Этот метод часто использвуется внутри условия "if", поэтому приведём пример именно с ним:

<div class="cheese" id="mouse"></div>
<script>
   if( $('#mouse').hasClass('cheese') ){
      // условие выполнится, потому что класс "cheese" есть
   }
   if( $('#mouse').hasClass('cat') ){
      // условие не выполнится, потому что нет класса "cat"
   }
</script>