Использование Cash в ванильных проектах

Cash — это лёгкая альтернатива jQuery, предоставляющая удобный API для работы с DOM, событиями и AJAX. Библиотека весит всего несколько килобайт, что делает её привлекательной для небольших проектов, где не требуется полный функционал jQuery. Она полностью совместима с современными браузерами и поддерживает большинство популярных методов манипуляции DOM.

Подключение библиотеки

Для работы с Cash достаточно подключить скрипт через CDN или локально:

<script src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js"></script>

После подключения доступна глобальная функция $, аналогичная jQuery:

$(selector)

где selector может быть строкой CSS-селектора, элементом DOM или массивом элементов.

Выбор элементов

Cash использует знакомый синтаксис CSS-селекторов для поиска элементов на странице:

// Получение всех абзацев
const paragraphs = $('p');

// Получение элемента по идентификатору
const header = $('#main-header');

// Получение элементов по классу
const buttons = $('.btn');

Возвращаемый объект — это коллекция элементов, поддерживающая цепочку вызовов методов.

Манипуляция DOM

Изменение содержимого

Cash позволяет быстро изменять текст и HTML:

// Изменение текста
$('#title').text('Новый заголовок');

// Установка HTML
$('.container').html('<p>Новый параграф</p>');

Методы text() и html() поддерживают как установку, так и получение содержимого:

const content = $('#title').text(); // Получение текста

Работа с атрибутами и свойствами

// Установка атрибута
$('img').attr('src', 'image.jpg');

// Получение атрибута
const src = $('img').attr('src');

// Добавление/удаление классов
$('.menu').addClass('active');
$('.menu').removeClass('active');
$('.menu').toggleClass('open');

// Изменение стилей
$('#box').css('background-color', 'red');

Управление событиями

Cash упрощает работу с событиями, обеспечивая удобный синтаксис и поддержку делегирования:

// Обработчик клика
$('.btn').on('click', function(event) {
    console.log('Кнопка нажата');
});

// Удаление обработчика
$('.btn').off('click');

// Делегирование события
$(document).on('click', '.dynamic-btn', function() {
    console.log('Динамическая кнопка нажата');
});

Методы .on() и .off() полностью заменяют нативные addEventListener и removeEventListener, сохраняя цепочку вызовов.

Работа с классами и атрибутами

Cash предоставляет удобные методы для манипуляции классами и атрибутами:

// Проверка наличия класса
if ($('#menu').hasClass('active')) {
    console.log('Меню активно');
}

// Получение/установка атрибутов
const id = $('#menu').attr('id');
$('#menu').attr('data-role', 'navigation');

// Удаление атрибута
$('#menu').removeAttr('data-role');

Эффекты и анимации

Cash поддерживает базовые анимации через методы show(), hide(), toggle() и fade*():

// Показ элемента
$('#panel').show();

// Скрытие элемента с плавностью
$('#panel').hide(500);

// Переключение видимости
$('#panel').toggle();

// Плавное появление/исчезновение
$('#panel').fadeIn(400);
$('#panel').fadeOut(400);
$('#panel').fadeToggle(400);

Аргумент в миллисекундах задаёт длительность анимации. Если аргумент не указан, используется мгновенное выполнение.

Манипуляция элементами DOM

Cash позволяет создавать новые элементы и вставлять их в DOM:

// Создание нового элемента
const newDiv = $('<div class="card">Содержимое карточки</div>');

// Добавление в контейнер
$('.container').append(newDiv);

// Вставка перед элементом
$('#title').before('<hr>');

// Вставка после элемента
$('#title').after('<hr>');

// Замена содержимого
$('#old-element').replaceWith('<p>Новый элемент</p>');

Методы append, prepend, before, after и replaceWith поддерживают как строки HTML, так и объекты Cash.

AJAX-запросы

Cash предоставляет минималистичный интерфейс для AJAX через метод $.ajax:

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

Также доступны сокращённые методы $.get и $.post:

$.get('https://api.example.com/data', function(data) {
    console.log(data);
});

$.post('https://api.example.com/send', { name: 'John' }, function(response) {
    console.log(response);
});

Итерации и фильтрация

Методы each, map, filter позволяют работать с коллекциями элементов:

// Перебор элементов
$('li').each(function(index, element) {
    console.log(index, element.textContent);
});

// Фильтрация элементов
const activeItems = $('li').filter('.active');

// Создание нового массива значений
const texts = $('li').map(function() {
    return $(this).text();
});

Метод map возвращает объект Cash, совместимый с цепочкой вызовов, что упрощает дальнейшие операции.

Совместимость с ванильным JS

Объекты Cash легко интегрируются с нативными методами Jav * aScript:

// Доступ к нативному элементу
const firstButton = $('.btn')[0];

// Использование нативного метода
firstButton.focus();

// Преобразование коллекции в массив
const buttonsArray = $('.btn').toArray();

Метод toArray() позволяет применять стандартные методы массива, такие как map, filter и forEach.

Цепочки вызовов

Cash полностью поддерживает цепочки методов, что упрощает запись компактного и понятного кода:

$('#menu')
    .addClass('visible')
    .css('opacity', '1')
    .on('click', function() {
        $(this).toggleClass('active');
    });

Цепочки работают для всех методов, возвращающих объект Cash, обеспечивая консистентный синтаксис, аналогичный jQuery.

Работа с формами

Cash позволяет быстро обрабатывать значения полей и отправку форм:

// Получение значения поля
const name = $('#name').val();

// Установка значения
$('#name').val('Иван');

// Сброс формы
$('#form')[0].reset();

Метод val() поддерживает как строки, так и массивы для мультиселектов, что удобно при работе с сложными формами.

Заключение

Библиотека Cash предоставляет компактный и удобный интерфейс для работы с DOM, событиями, формами и AJAX в ванильных проектах. Её лёгкость и совместимость с нативным JavaScript делают её идеальной альтернативой jQuery для небольших и средних веб-проектов.

Оглавление