Работа с заголовками

Библиотека Cash — это легковесная альтернативная версия jQuery, ориентированная на работу с DOM, событиями и анимациями. Работа с заголовками (<h1>–<h6>) в Cash реализуется через стандартные методы управления элементами, атрибутами и содержимым.

Выбор заголовков

Cash использует селекторы, аналогичные CSS. Для работы с заголовками применяются следующие подходы:

// Выбор всех заголовков h1
const headers1 = $('h1');

// Выбор всех заголовков h2 внутри определенного контейнера
const subHeaders = $('#container h2');

// Выбор нескольких типов заголовков
const allHeaders = $('h1, h2, h3, h4, h5, h6');

Метод $() возвращает объект Cash, который поддерживает цепочки вызовов методов, что удобно для массовых операций над элементами.

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

Для чтения текстового содержимого заголовка используется метод .text():

const mainTitle = $('h1').text();
console.log(mainTitle);

Метод .text() без аргументов возвращает строку с текстом первого найденного элемента, а при передаче строки в качестве аргумента — заменяет текст всех выбранных элементов:

$('h2').text('Новый подзаголовок');

Работа с HTML-содержимым

Метод .html() позволяет получать и изменять внутренний HTML:

// Получение HTML
const htmlContent = $('h3').html();

// Замена HTML
$('h3').html('<span>Измененный заголовок</span>');

Это полезно, когда необходимо добавить внутри заголовка дополнительные элементы, такие как <span> или иконки.

Управление атрибутами заголовков

Заголовки могут содержать различные атрибуты: id, class, data-*. Для работы с ними используются методы .attr() и .removeAttr():

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

// Установка атрибута
$('h2').attr('data-level', '2');

// Удаление атрибута
$('h2').removeAttr('data-level');

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

$('h1, h2').attr({
    'data-type': 'heading',
    'title': 'Заголовок'
});

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

Методы .addClass(), .removeClass(), .toggleClass() позволяют управлять стилями через классы:

// Добавление класса
$('h1').addClass('highlight');

// Удаление класса
$('h2').removeClass('old-style');

// Переключение класса
$('h3').toggleClass('active');

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

$('h1, h2')
    .addClass('visible')
    .removeClass('hidden')
    .attr('data-processed', 'true');

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

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

// Удаление всех h3
$('h3').remove();

// Клонирование h2 и вставка в конец body
$('h2').clone().appendTo('body');

// Вставка нового заголовка перед существующим
$('<h4>Новый заголовок</h4>').insertBefore('h1');

// Вставка после
$('<h4>Еще один заголовок</h4>').insertAfter('h1');

Методы .append(), .prepend(), .before() и .after() работают аналогично jQuery и поддерживают как строки HTML, так и элементы DOM.

События заголовков

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

// Добавление обработчика клика
$('h1').on('click', function() {
    console.log('Заголовок h1 был нажат');
});

// Удаление обработчика
$('h1').off('click');

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

$('h2').on('mouseenter mouseleave', function() {
    $(this).toggleClass('hovered');
});

Фильтрация и поиск внутри заголовков

Методы .filter(), .not(), .find() позволяют работать с подмножествами заголовков:

// Фильтрация заголовков с классом active
const activeHeaders = $('h1, h2').filter('.active');

// Исключение заголовков с классом disabled
const enabledHeaders = $('h1, h2').not('.disabled');

// Поиск span внутри заголовков
const spansInHeaders = $('h2').find('span');

Анимации заголовков

Cash поддерживает простые анимации через .hide(), .show(), .fadeIn(), .fadeOut():

// Скрыть все h1
$('h1').hide();

// Плавное появление h2
$('h2').fadeIn(500);

// Плавное скрытие с callback
$('h3').fadeOut(300, function() {
    console.log('Анимация завершена');
});

Методы анимации позволяют использовать длительность в миллисекундах и колбэки для последовательных действий.

Резюме возможностей

  • Выбор заголовков с помощью CSS-селекторов.
  • Получение и изменение текста и HTML.
  • Управление атрибутами и классами.
  • Работа с DOM: вставка, удаление, клонирование.
  • Добавление и удаление событий.
  • Фильтрация и поиск элементов внутри заголовков.
  • Простейшие анимации.

Использование Cash для работы с заголовками обеспечивает компактный, понятный и цепочечный синтаксис, который минимизирует объем кода и повышает читаемость.

Оглавление