Изменение атрибута "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>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: