CSS-селекторы

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

const elems = $('.my-class'); // выбирает все элементы с классом my-class

Важно: $() возвращает объект Cash, который поддерживает цепочку методов, аналогично jQuery.

Выбор элементов по CSS-селекторам

Cash полностью поддерживает стандартные CSS-селекторы:

  • По идентификатору
const header = $('#header'); // выбирает элемент с id="header"
  • По классу
const buttons = $('.btn'); // выбирает все элементы с классом btn
  • По тегу
const paragraphs = $('p'); // выбирает все абзацы
  • Комбинированные селекторы
const items = $('ul li.active'); // все элементы li с классом active внутри ul
  • Атрибутные селекторы
const links = $('a[href^="https"]'); // все ссылки, начинающиеся с https
  • Псевдоклассы
const firstItems = $('li:first-child'); // первый элемент li в родительском элементе

Ограничения и особенности Cash в работе с селекторами

  1. Cash поддерживает большинство селекторов CSS3, но некоторые сложные комбинации (например, :has()) могут работать иначе или отсутствовать.
  2. Cash оптимизирована под современные браузеры, поэтому методы querySelector и querySelectorAll используются напрямую для поиска элементов.
  3. Если селектор не найден, возвращается пустой объект Cash, что позволяет безопасно применять цепочку методов без проверок.

Работа с множественными элементами

Cash автоматически перебирает коллекцию выбранных элементов при вызове методов. Например:

$('.btn').addClass('active'); // добавляет класс active ко всем кнопкам

Метод each позволяет выполнять произвольную функцию для каждого элемента:

$('li').each((index, el) => {
    el.textContent = `Элемент ${index + 1}`;
});

Особенность: Первый параметр функции index — индекс элемента в коллекции, второй — сам DOM-элемент.

Навигация по DOM

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

  • parent() — родительский элемент
const parent = $('.item').parent();
  • children() — дочерние элементы
const children = $('#list').children();
  • find() — поиск внутри выбранного элемента
const inner = $('.container').find('p.highlight');
  • siblings() — соседние элементы на одном уровне
const siblings = $('.active').siblings();

Эти методы возвращают объекты Cash, позволяя продолжать цепочку вызовов.

Манипуляции с классами

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

  • addClass() — добавление класса
$('.btn').addClass('selected');
  • removeClass() — удаление класса
$('.btn').removeClass('disabled');
  • toggleClass() — переключение класса
$('.menu-item').toggleClass('expanded');
  • hasClass() — проверка наличия класса
if ($('.item').hasClass('visible')) { ... }

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

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

  • attr() — чтение и установка атрибутов
$('a').attr('href', 'https://example.com'); // установка
const href = $('a').attr('href'); // чтение
  • removeAttr() — удаление атрибута
$('input').removeAttr('disabled');
  • prop() — работа со свойствами DOM
$('input[type="checkbox"]').prop('checked', true);
  • val() — получение или установка значения формы
$('#name').val('Иван');
const value = $('#name').val();

Работа с содержимым элементов

Cash позволяет легко управлять содержимым элементов:

  • html() — чтение и установка HTML
$('.content').html('<p>Новый текст</p>');
  • text() — чтение и установка текстового содержимого
$('.title').text('Привет, мир!');
  • empty() — удаление содержимого
$('#container').empty();
  • append() / prepend() — добавление элементов в конец или начало
$('#list').append('<li>Новый элемент</li>');
$('#list').prepend('<li>Первый элемент</li>');
  • before() / after() — вставка перед или после выбранного элемента
$('.item').before('<hr>');
$('.item').after('<hr>');

События

Cash предоставляет методы для привязки событий:

  • on() — добавление обработчика
$('.btn').on('click', (e) => {
    console.log('Нажата кнопка', e.target);
});
  • off() — удаление обработчика
$('.btn').off('click');
  • one() — однократное срабатывание события
$('.btn').one('click', () => alert('Нажато один раз'));
  • trigger() — программное вызов события
$('.btn').trigger('click');

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

Анимации и эффекты

Cash поддерживает простые анимации:

  • show() / hide() — отображение и скрытие элементов
$('.modal').show();
$('.modal').hide();
  • toggle() — переключение видимости
$('.menu').toggle();
  • fadeIn() / fadeOut() / fadeToggle() — плавное появление и исчезновение
$('.popup').fadeIn(300);
$('.popup').fadeOut(300);
$('.popup').fadeToggle(300);
  • slideDown() / slideUp() / slideToggle() — скользящие эффекты
$('#panel').slideDown(400);
$('#panel').slideUp(400);
$('#panel').slideToggle(400);

Все методы анимации поддерживают передачу времени в миллисекундах и колбэки после завершения анимации.

Цепочка методов

Cash позволяет объединять несколько действий в цепочку:

$('.item')
    .addClass('active')
    .attr('data-status', 'selected')
    .fadeIn(200)
    .on('click', () => console.log('Кликнут элемент'));

Цепочка сохраняет выбранные элементы, обеспечивая лаконичность и читаемость кода. Это одно из ключевых преимуществ Cash перед чистым DOM API.

Совместимость с чистым DOM

Любой объект Cash можно преобразовать в обычный массив элементов:

const elems = $('.item').toArray();
elems.forEach(el => console.log(el.tagName));

Метод get(index) возвращает конкретный DOM-элемент по индексу:

const firstItem = $('.item').get(0);

Оптимизация производительности

  1. Выбор по ID быстрее всех, так как использует getElementById.
  2. Для часто повторяющихся селекторов рекомендуется кэшировать результаты:
const buttons = $('.btn'); // не искать каждый раз
buttons.addClass('highlight');
  1. Методы, изменяющие DOM, применяются ко всей коллекции одновременно, минимизируя количество обходов дерева.

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

Оглавление