Что такое Cash

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

Библиотека реализована как функция cash(), которая возвращает коллекцию элементов, с которыми можно работать аналогично объекту jQuery. Внутри коллекция представляет собой массивоподобный объект с методами для поиска, фильтрации, изменения и управления событиями.

const elems = cash('div.example');
elems.addClass('highlight');

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

Основной метод: cash(selector)

  • selector — CSS-селектор, DOM-элемент или массив элементов.
  • Возвращает объект Cash, который можно использовать для дальнейших операций.

Примеры выбора:

cash('p');               // Все параграфы на странице
cash('#main');            // Элемент с id="main"
cash(document.querySelectorAll('.item')); // NodeList элементов

Cash поддерживает комбинированные селекторы и позволяет работать с динамически созданными элементами.

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

Методы для управления классами схожи с jQuery:

  • addClass(name) — добавляет класс
  • removeClass(name) — удаляет класс
  • toggleClass(name, force) — переключает класс
  • hasClass(name) — проверяет наличие класса

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

cash('div.card').addClass('active');
cash('#header').removeClass('hidden');
cash('.menu').toggleClass('open');

Управление атрибутами и свойствами

Методы для атрибутов:

  • attr(name) — получение значения атрибута
  • attr(name, value) — установка атрибута
  • removeAttr(name) — удаление атрибута

Пример:

cash('img').attr('src', 'logo.png');
console.log(cash('img').attr('alt'));
cash('a').removeAttr('target');

Свойства DOM:

  • prop(name) — получение свойства
  • prop(name, value) — установка свойства

Пример:

cash('#checkbox').prop('checked', true);

Манипуляции с содержимым

  • html() — получает или задаёт HTML-содержимое элемента
  • text() — получает или задаёт текст
  • append(content) — добавляет внутрь элемента
  • prepend(content) — вставляет внутрь элемента в начало
  • before(content) — вставляет перед элементом
  • after(content) — вставляет после элемента
  • remove() — удаляет элемент из DOM

Пример:

cash('#container').html('<p>Новый контент</p>');
cash('.list').append('<li>Элемент списка</li>');
cash('.item:first').remove();

Работа с событиями

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

  • on(event, selector, handler) — привязка события
  • off(event, handler) — удаление обработчика
  • trigger(event) — программная генерация события

Примеры:

cash('button').on('click', () => console.log('Нажата кнопка'));
cash('input').off('focus');
cash('#form').trigger('submit');

Поддерживаются делегирование событий через указание селектора второго параметра:

cash('#list').on('click', 'li', function() {
  console.log(this.textContent);
});

Работа с размерами и позициями

Методы для измерения элементов:

  • width() / height() — получение ширины/высоты элемента
  • innerWidth() / innerHeight() — включая padding
  • outerWidth(includeMargin) / outerHeight(includeMargin) — включая padding и border, опционально margin
  • offset() — позиция элемента относительно документа
  • position() — позиция относительно offsetParent

Пример:

const box = cash('#box');
console.log(box.width(), box.height());
console.log(box.offset());

Манипуляции с CSS

  • css(property) — получение стиля
  • css(property, value) — установка стиля
  • css({property1: value1, property2: value2}) — установка нескольких стилей одновременно

Примеры:

cash('.title').css('color', 'red');
cash('p').css({ fontSize: '16px', lineHeight: '1.5' });

AJAX

Cash включает базовые возможности AJAX через метод ajax(options):

cash.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json',
  success(response) { console.log(response); },
  error(err) { console.error(err); }
});

Параметры:

  • url — адрес запроса
  • method — GET, POST, PUT, DELETE
  • data — данные для отправки
  • dataType — ожидаемый формат ответа (json, text)
  • success — callback при успешном ответе
  • error — callback при ошибке

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

Cash имеет базовые методы для анимации:

  • show() — показать элемент
  • hide() — скрыть элемент
  • toggle() — переключение видимости
  • fadeIn(duration) / fadeOut(duration) — плавное появление и исчезновение
  • slideUp(duration) / slideDown(duration) — сворачивание и разворачивание

Пример:

cash('#modal').fadeIn(400);
cash('#modal').fadeOut(400);

Работа с коллекциями элементов

Методы для фильтрации и перебора коллекции:

  • each(callback) — перебор элементов
  • filter(selector) — фильтрация по селектору или функции
  • first() / last() — получение первого или последнего элемента
  • eq(index) — получение элемента по индексу
  • find(selector) — поиск потомков
  • closest(selector) — поиск ближайшего родителя

Примеры:

cash('.item').each((el, i) => console.log(i, el));
const firstItem = cash('.item').first();
const parent = cash('#child').closest('.parent');

Преимущества Cash

  • Минимальный размер библиотеки (~10KB gzipped)
  • Совместимость с современными браузерами
  • API, полностью совместимое с jQuery для основных операций
  • Простота интеграции в существующие проекты без конфликта с другими библиотеками

Cash позволяет писать лаконичный, чистый код, избегая громоздкости jQuery, при этом сохраняя привычный стиль манипуляций с DOM и событиями.

Оглавление