Добавление классов

Библиотека Cash предоставляет лёгкий и удобный способ работы с DOM, вдохновлённый jQuery, но с меньшим объёмом и более высокой производительностью. Одной из ключевых возможностей является манипуляция классами элементов через методы addClass, removeClass, toggleClass и hasClass. Эти методы позволяют динамически управлять внешним видом элементов, управлять состояниями и применять CSS-правила без прямого обращения к свойству className.

Метод addClass

Метод addClass используется для добавления одного или нескольких CSS-классов к выбранным элементам.

Синтаксис:

$(selector).addClass(className);

Параметры:

  • className — строка с названием класса или нескольких классов, разделённых пробелом. Также может быть функцией, возвращающей строку класса.

Примеры использования:

$('.button').addClass('active');

Добавляет класс active ко всем элементам с классом button.

$('li').addClass('highlight important');

Добавляет сразу два класса highlight и important каждому элементу списка <li>.

Использование функции для динамического добавления классов:

$('p').addClass((index, currentClass) => {
    if (index % 2 === 0) {
        return 'even';
    }
    return 'odd';
});

Функция получает индекс элемента и текущий класс, возвращает новый класс для добавления. Это удобно для применения чередующихся стилей.

Метод removeClass

Метод removeClass удаляет один или несколько классов с выбранных элементов.

Синтаксис:

$(selector).removeClass(className);

Параметры:

  • className — строка с названием класса или классов для удаления. Если параметр не указан, будут удалены все классы.

Примеры использования:

$('.button').removeClass('active');

Удаляет класс active со всех элементов с классом button.

$('li').removeClass('highlight important');

Удаляет сразу два класса highlight и important.

Удаление всех классов:

$('p').removeClass();

Удаляет все CSS-классы у всех параграфов <p>.

Использование функции для динамического удаления:

$('div').removeClass((index, currentClass) => {
    return currentClass.includes('remove-me') ? 'remove-me' : '';
});

Функция возвращает класс для удаления, что позволяет гибко управлять состояниями элементов.

Метод toggleClass

Метод toggleClass используется для добавления класса, если его нет, или удаления, если он присутствует. Поддерживается дополнительный параметр force, который определяет действие явно.

Синтаксис:

$(selector).toggleClass(className, force);

Параметры:

  • className — класс или несколько классов через пробел.
  • force — необязательный булевый параметр. true добавляет класс, false удаляет.

Примеры использования:

$('.button').toggleClass('active');

Если у кнопки нет класса active, он добавляется. Если есть — удаляется.

$('.button').toggleClass('active', true);

Принудительно добавляет класс active ко всем элементам, игнорируя текущее состояние.

Динамическое использование с функцией:

$('li').toggleClass((index, currentClass) => {
    return index % 2 === 0 ? 'even' : 'odd';
});

Позволяет применять разные классы на основе позиции или состояния элемента.

Метод hasClass

Метод hasClass проверяет наличие определённого класса у выбранного элемента. Возвращает true или false.

Синтаксис:

$(selector).hasClass(className);

Параметры:

  • className — название класса для проверки.

Пример использования:

if ($('.button').hasClass('active')) {
    console.log('Кнопка активна');
}

Проверяет, есть ли у кнопки класс active.

Особенности работы с классами в Cash

  1. Множественные классы: Методы addClass, removeClass и toggleClass поддерживают передачу нескольких классов через пробел.
  2. Функциональный подход: Все методы могут принимать функцию, что даёт гибкость при динамическом управлении стилями.
  3. Цепочки методов: Методы возвращают объект Cash, позволяя писать компактный код:
$('.item')
    .addClass('highlight')
    .toggleClass('active')
    .removeClass('disabled');
  1. Сравнение с jQuery: Cash полностью совместим по синтаксису с jQuery для работы с классами, но легче и быстрее за счёт оптимизации под современные браузеры.

Рекомендации по использованию

  • Для управления состояниями элементов интерфейса (active, selected, hidden) предпочтительно использовать методы работы с классами вместо прямой манипуляции className.
  • Использование функций для добавления или удаления классов упрощает создание динамических интерфейсов.
  • Методы toggleClass с параметром force особенно полезны при синхронизации состояния UI с логикой приложения.

Манипуляция классами через Cash делает код более читаемым, структурированным и лёгким для поддержки, сохраняя высокую производительность.

Оглавление