Синтаксис и базовые конструкции

Cash — это лёгкая библиотека для работы с DOM, аналог jQuery, но с меньшим весом и современным синтаксисом. Для использования можно подключить через npm или CDN.

Через npm:

npm install cash-dom

Подключение через ES-модули:

import $ from 'cash-dom';

Через CDN:

<script src="https://unpkg.com/cash-dom/dist/cash.min.js"></script>

После подключения $ становится основной функцией для работы с элементами DOM.

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

Cash использует CSS-селекторы для получения элементов, возвращая объект, похожий на массив. Основная конструкция:

const elems = $('.my-class');

Ключевые моменты:

  • $('.my-class') — выбирает все элементы с классом my-class.
  • $('#my-id') — выбирает элемент по ID.
  • $('div > p') — поддерживаются сложные CSS-селекторы.
  • Возвращаемый объект поддерживает методы манипуляции DOM, аналогично массиву, но напрямую не является массивом JavaScript.

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

Cash позволяет легко изменять текст и HTML элементов.

$('.my-class').text('Новый текст');
$('.my-class').html('<span>Обновлённый HTML</span>');

Особенности:

  • text() заменяет текстовое содержимое всех выбранных элементов.
  • html() заменяет HTML, при этом любые вложенные элементы перезаписываются.
  • Можно использовать функцию для динамического изменения:
$('.my-class').text((index, oldText) => `${oldText} ${index}`);

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

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

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

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

// Установка нескольких атрибутов
$('img').attr({ alt: 'Описание', title: 'Заголовок' });

Свойства элементов (checked, selected, value) можно изменять через prop:

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

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

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

$('.item').addClass('active');
$('.item').removeClass('inactive');
$('.item').toggleClass('highlighted');

Дополнительные возможности:

  • hasClass('active') возвращает true или false.
  • toggleClass('name', condition) позволяет добавить или убрать класс в зависимости от условия.

События

Cash упрощает работу с событиями, поддерживая методы on и off.

$('.button').on('click', () => console.log('Нажата кнопка'));
$('.button').off('click');

Особенности:

  • Поддерживаются делегированные события:
$(document).on('click', '.dynamic-button', () => console.log('Динамическая кнопка'));
  • Можно добавлять несколько событий одновременно:
$('.input').on('focus blur', () => console.log('Фокус или потеря фокуса'));

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

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

// Добавление нового элемента
$('<div>Новый блок</div>').appendTo('body');
$('body').prepend('<header>Заголовок</header>');

// Вставка элементов относительно существующих
$('.container').before('<p>Перед контейнером</p>');
$('.container').after('<p>После контейнера</p>');

// Удаление элементов
$('.remove-me').remove();

// Очистка содержимого
$('.container').empty();

Размеры и позиционирование

Для работы с размерами элементов используются методы width(), height(), innerWidth(), innerHeight(), outerWidth() и outerHeight().

const w = $('.box').width();
$('.box').height(200);

// Включая padding и border
const outer = $('.box').outerWidth(true);

Особенности:

  • innerWidth учитывает padding, но не border.
  • outerWidth(true) учитывает margin.

Итерации по элементам

Cash позволяет обходить выбранные элементы через метод each:

$('.item').each((index, el) => {
  console.log(index, el.textContent);
});
  • index — порядковый номер элемента.
  • el — DOM-элемент, а не объект Cash.

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

Все методы Cash (кроме получения значений) возвращают объект Cash, что позволяет строить цепочки:

$('.item')
  .addClass('active')
  .text('Обновлённый текст')
  .css('color', 'red');

Поддерживаемые цепочки:

  • Манипуляции с классами
  • Работа с текстом и HTML
  • Изменение атрибутов и стилей
  • Добавление/удаление элементов

Стили и CSS

Изменение стилей через метод css:

$('.box').css('background-color', 'blue');
$('.box').css({ width: '100px', height: '50px' });
  • Можно использовать функцию для динамических значений:
$('.box').css('width', (i, value) => parseInt(value) + 10 + 'px');
  • Получение значения CSS:
const color = $('.box').css('background-color');

Итоговая структура базовых возможностей

  1. Выбор элементов: $()
  2. Манипуляции содержимым: text(), html()
  3. Атрибуты и свойства: attr(), prop()
  4. Классы: addClass(), removeClass(), toggleClass()
  5. События: on(), off()
  6. Манипуляции DOM: append(), prepend(), before(), after(), remove(), empty()
  7. Размеры и позиционирование: width(), height(), innerWidth(), outerWidth()
  8. Итерации: each()
  9. Цепочки методов: поддерживаются для большинства операций
  10. Стили: css()

Эти конструкции формируют основу работы с Cash, позволяя легко создавать, изменять и управлять DOM-элементами в современном JavaScript.

Оглавление