Работа с классами в jQuery: добавление, удаление и переключение

Для начинающих изучать jQuery очень важно уметь работать с классами, а по хорошему и с атрибутами html тегов. Разберем основные методы управления классами.

Предположим к нас есть такой html тег: <div class="yes">Текст</div>

Добавление класса в jQuery осуществляется с помощью метода .addClass(), где внутри скобок мы можем прописать как один, так и несколько классов. Примеры:

<script>
$(".yes").addClass("active"); //добавили 1 класс
$(".yes").addClass("active good"); //добавили сразу 2 класса
</script>

Удаление классов осуществляется аналогично с помощью метода .removeClass(). Также можно удалять как один, так и несколько классов. Для примера удалим несколько классов:

$(".yes").removeClass("active good"); //удалили сразу 2 класса

Переключение классов осуществляется за счет метода .toggleClass(). Работает это так: если внутри скобок указан какой-то класс и его нет в нужном теге, то он появится, а если есть, то удалится. Этим методом очень просто организовывать вкладки или кнопки по типу "показать/скрыть текст". Пример:

<div class="yes">Текст</div>
<div class="bt">Показать/скрыть</div>
<script>
$(".bt").click(function(){
$(".yes").toggleClass("show"); //переключает класс show
});
</script>
<style> .yes{ display: none; } .show { display: block; } </style>

В этом небольшом коде при нажатии на .bt будет срабатывать обработчик клика, который будет добавлять или удалять класс show (на котором назначен css позволяющий отобразить блок .yes).

И последнее, что также может очень пригодиться - проверка на существование класса у элемента. Работает на основе .hasClass(). Давайте сразу проверим, есть ли у нашего дива класс yes:

if ( $(".yes2").hasClass("yes") ) { alert("Существует"); }

В данном случае выведется сообщение, что класс yes действительно есть и с ним можно делать какие-то действия. Если удалить этот класс, то проверка не пройдет и сообщение не выведется.

Вот такими не хитрыми методами можно легко управлять внешним видом вашего сайта или программой.