Как в jquery удалить класс или добавить его

Приветствую вас, дорогие читатели. Сегодня я предлагаю подробно рассмотреть важную часть взаимодействия jquery и css. В частности, работу с классами. Сегодня вы узнаете, как в jquery удалить класс, добавить его или переключить. Обо всем этом по порядку.

Удаление класса

Допустим, в html разметке у нас есть блок с двумя классами. Первый задает элементу основные параметры, такие, как размеры. Класс b1 отвечает исключительно за фоновых цвет элемента.

<div class = "block b1"></div>

Сделаем так, чтобы при клике по блоку у него убирался класс b1 и соответственно, фоновый цвет исчезал. Напишем функцию, чтобы при загрузке страницы к нашему элементы привязывалось событие “клик” при котором к элементу применится функция del.

$(document).ready(function(){
        $(".block").bind('click', del);
    });

Метод bind позволяет связать элемент и событие для него. Таким образом, больше не обязательно писать в html-коде атрибуты вроде onclick, их можно задать в самом файле со скриптами.
Остается написать саму функцию:

function del(){
        $(".block").removeClass("b1");
}

Мы обратились к элементу по его первому классу и удаляем его второй. Таким образом, после клика по нему его фон удалится. Тут все понятно, я хотел бы обратить ваше внимание лишь на один момент. В круглых скобках у метода removeClass() нужно указать имя нужного класса, писать его нужно без точки, потому что этот метод итак выбирает именно класс и ничего больше.

Как в jquery добавить класс

Соответственно, противоположная операция и для нее существует метод addClass(). Давайте сделаем так, чтобы при двойном клике по блоку у него скруглялись углы.

$(document).ready(function(){
        $(".block").bind('dblclick', add);
    });

После загрузки элемент block получит событие двойной клик и выполнение функции add при этом. Заметьте, что имя функции не нужно записывать в кавычках.

function add(){
        $(".block").addClass("radius");
}

Сам класс добавляет следующее свойство:

Кликаем два раза и убеждаемся, что элемент скругляется. Если вы хотите, чтобы изменение стилей происходило не резко, можно просто в css задать нашему элементу свойство transition. О его применении вы можете посмотреть здесь.

Переключение класса

Ну и наконец, есть еще метод toogleClass(). Он действует так – если указанный стилевой класс присутствует у элемента, он его удаляет, а если не присутствует, он наоборот, его добавляет. Вот такой вот универсальный переключатель получается.