Альтернативы сложным селекторам

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

Выбор элементов без сложных селекторов

Одной из задач, где Cash показывает особую эффективность, является упрощение селекторов. В отличие от обычного DOM API, где часто приходится писать длинные конструкции вроде document.querySelectorAll('.container > ul li.item[data-active="true"]'), Cash позволяет:

$('.container > ul li.item[data-active="true"]');

Это выражение сразу возвращает коллекцию элементов, с которой можно работать дальше, используя методы библиотеки. Коллекция не является чистым массивом, но поддерживает методы forEach, map и другие подобные функции.

Прямой выбор по классам и идентификаторам

  • $('.my-class') — выбирает все элементы с классом my-class.
  • $('#my-id') — выбирает элемент с конкретным идентификатором.
  • $('div') — выбирает все элементы определённого тега.
  • $(this) — используется для обёртки текущего элемента внутри обработчиков событий.

Работа с атрибутами и фильтрация

Cash упрощает фильтрацию элементов по атрибутам. Вместо сложных циклов и условий можно использовать цепочки методов:

$('input').filter('[type="text"]').addClass('highlight');

Метод .filter() принимает CSS-селектор или функцию обратного вызова. Функция получает индекс и элемент, что позволяет создавать гибкую фильтрацию:

$('li').filter((index, el) => el.textContent.includes('Активный'));

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

Добавление, удаление и изменение элементов с Cash делается через лаконичные методы:

  • .append(content) — добавляет содержимое внутрь выбранных элементов.
  • .prepend(content) — добавляет содержимое в начало.
  • .before(content) и .after(content) — вставляют элементы до или после выбранного элемента.
  • .remove() — удаляет элементы из DOM.

Примеры:

$('.list').append('<li>Новый элемент</li>');
$('#container').prepend('<p>Верхний абзац</p>');

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

Для управления классами используются удобные методы:

  • .addClass(className) — добавляет класс.
  • .removeClass(className) — удаляет класс.
  • .toggleClass(className) — переключает класс.

Манипуляции со стилями:

$('.box').css('background-color', 'blue');
$('.box').css({
  width: '100px',
  height: '100px'
});

Метод .css() может принимать как пару ключ–значение, так и объект со свойствами, что значительно сокращает код при множественных изменениях стиля.

Обработка событий

Cash предлагает простой интерфейс для событий:

$('.button').on('click', (e) => {
  console.log('Кнопка нажата', e.target);
});

Методы .on() и .off() работают аналогично jQuery, поддерживая делегирование событий:

$('#list').on('click', 'li', (e) => {
  console.log('Нажат элемент списка', e.target);
});

Итерация и цепочки

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

$('li')
  .filter('.active')
  .css('color', 'red')
  .on('click', (e) => e.target.classList.toggle('clicked'));

Каждый метод возвращает объект Cash, что делает код компактным и читаемым.

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

Для элементов формы Cash предоставляет методы .val(), .prop() и .attr():

const value = $('#input').val();
$('#checkbox').prop('checked', true);
$('img').attr('src', 'image.png');

Методы .val() и .prop() особенно полезны для упрощения сложных выборок элементов форм и их состояния, заменяя длинные конструкции через стандартный DOM API.

Преимущества перед нативными сложными селекторами

Использование Cash позволяет:

  • Сократить количество кода при сложных селекторах.
  • Обеспечить кроссбраузерную совместимость.
  • Работать с коллекциями элементов через единый интерфейс.
  • Легко комбинировать фильтрацию, манипуляции и обработку событий.

Заключение по использованию

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

Оглавление