Получение и установка HTML

Cash — это лёгкая библиотека, предоставляющая функциональность, аналогичную jQuery, но с меньшим объёмом и более высокой производительностью. Для работы с ней требуется подключение скрипта к HTML-документу.

Способы подключения:

  1. Через CDN Наиболее простой способ — подключение с помощью ссылок на CDN. Вставка выполняется в <head> или перед закрывающим тегом </body>:
<script src="https://cdn.jsdelivr.net/npm/cash-dom@8/dist/cash.min.js"></script>
  1. Через npm При использовании сборщиков модулей (Webpack, Parcel, Vite) библиотека устанавливается командой:
npm install cash-dom

Далее в коде JavaScript выполняется импорт:

import $ from 'cash-dom';
  1. Локальная установка Можно скачать библиотеку с официального репозитория и подключить локально:
<script src="path/to/cash.min.js"></script>

Основные принципы работы с HTML

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

Примеры:

// Выбор всех абзацев
const paragraphs = $('p');

// Выбор элемента по идентификатору
const main = $('#main');

// Выбор по классу
const buttons = $('.btn');

Возвращаемый объект поддерживает цепочки методов, что делает работу с DOM лаконичной:

$('.btn').addClass('active').text('Нажато');

Получение содержимого HTML

Методы html() и text() позволяют получать и изменять содержимое элементов.

html() Возвращает внутренний HTML первого элемента в наборе:

const content = $('#main').html();
console.log(content);

Можно заменить HTML у всех выбранных элементов:

$('.card').html('<p>Новый контент</p>');

text() Работает аналогично html(), но возвращает или устанавливает только текст без тегов:

const textContent = $('.description').text();
$('.description').text('Обновлённый текст');

Атрибуты и свойства элементов

Методы attr() и prop() обеспечивают управление атрибутами и свойствами DOM-элементов.

attr() Позволяет получить или установить значение атрибута:

const src = $('img').attr('src');
$('img').attr('alt', 'Описание изображения');

prop() Используется для работы с DOM-свойствами:

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

Добавление и удаление классов

Cash предоставляет методы addClass, removeClass, toggleClass для управления классами элементов:

$('.menu-item').addClass('highlighted');
$('.menu-item').removeClass('inactive');
$('.menu-item').toggleClass('selected');

Методы поддерживают множественные классы через пробел:

$('#button').addClass('active primary');

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

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

  • append() — добавление внутрь элементов:
$('#list').append('<li>Новый элемент</li>');
  • prepend() — добавление в начало:
$('#list').prepend('<li>Первый элемент</li>');
  • before() и after() — вставка до или после элемента:
$('.item').before('<div>Перед элементом</div>');
$('.item').after('<div>После элемента</div>');
  • remove() — удаление элементов:
$('.ad-banner').remove();

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

Cash упрощает работу с событиями через метод on():

$('#submit').on('click', function(event) {
    event.preventDefault();
    console.log('Форма отправлена');
});

Удаление обработчиков осуществляется методом off():

$('#submit').off('click');

Поддерживаются делегирование и множественные события:

$(document).on('mouseover mouseout', '.hoverable', () => {
    console.log('Наведение мыши');
});

Вывод и получение информации о DOM

Методы val(), width(), height() позволяют получать значения полей формы и размеры элементов:

const inputValue = $('#name').val();
$('#name').val('Новое значение');

const elementWidth = $('.box').width();
const elementHeight = $('.box').height();

Метод css() управляет стилями:

$('.box').css('background-color', 'blue');
const bg = $('.box').css('background-color');

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

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

$('#panel')
    .addClass('active')
    .css('display', 'block')
    .html('<p>Содержимое панели</p>');

Выборка по сложным селекторам

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

$('ul li:first-child');
$('div > p.highlighted');
$('input[type="text"]:checked');

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

$('li').each(function(index, element) {
    console.log(index, $(element).text());
});

Работа с атрибутами data-*

Методы data() позволяют хранить и получать пользовательские данные:

$('.item').data('id', 123);
const id = $('.item').data('id'); // 123

Данные хранятся в памяти и автоматически синхронизируются с атрибутами data-*.

Итоговые возможности Cash

  • Выбор элементов с помощью CSS-селекторов.
  • Получение и изменение HTML и текста.
  • Управление атрибутами, свойствами и классами.
  • Вставка, удаление и изменение элементов DOM.
  • Обработка событий и делегирование.
  • Работа с размерами, стилями и значениями полей формы.
  • Хранение данных через data().
  • Поддержка цепочек вызовов для компактного и читаемого кода.

Библиотека Cash объединяет удобство jQuery с лёгкостью и высокой производительностью, делая работу с HTML-интерфейсом более прямой и лаконичной.

Оглавление