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

Zepto.js предоставляет компактный и удобный набор методов для манипуляций с HTML-заголовками (h1–h6) и другими текстовыми элементами документа. Благодаря простому синтаксису, библиотека позволяет выполнять выборку элементов, изменение содержимого, добавление и удаление элементов, а также управление атрибутами и стилями.

Выбор элементов заголовков

Для выбора заголовков используется CSS-селектор, передаваемый в функцию $(...). Примеры:

// Все заголовки h1
var h1Elements = $('h1');

// Все заголовки от h1 до h3
var topHeadings = $('h1, h2, h3');

// Заголовки внутри контейнера с id "content"
var contentHeadings = $('#content h2');

Метод возвращает объект Zepto, позволяющий использовать цепочку методов для дальнейших операций.

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

Для работы с текстовым содержимым заголовков используются методы .text() и .html().

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

var firstHeadingText = $('h1').text();

Если выбранный селектор возвращает несколько элементов, метод .text() объединяет содержимое всех элементов в одну строку.

Изменение текста:

$('h2').text('Новый заголовок второго уровня');

Метод .html() позволяет не только изменить текст, но и вставлять HTML-контент:

$('h3').html('Важно: Третий заголовок');

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

Создание нового заголовка и его добавление на страницу производится через методы .append(), .prepend(), .after() и .before().

// Добавление нового h2 в конец контейнера
$('#content').append('
Новый заголовок
');

// Вставка заголовка перед первым h1
$('h1:first').before('
Вставленный заголовок
');

Удаление элементов выполняется методом .remove():

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

Метод .empty() очищает содержимое элемента, оставляя сам элемент в DOM:

// Очищает текст внутри h2
$('h2').empty();

Манипуляции с атрибутами заголовков

Заголовки могут содержать атрибуты id, class и другие. Zepto предоставляет методы .attr() и .removeAttr() для работы с ними.

// Получение значения id первого h1
var headingId = $('h1').attr('id');

// Установка класса для всех h2
$('h2').attr('class', 'section-title');

// Удаление атрибута
$('h3').removeAttr('class');

Также поддерживаются методы .data() для работы с пользовательскими атрибутами data-*.

Управление стилями заголовков

Для изменения внешнего вида заголовков используется метод .css():

// Изменение цвета и размера текста
$('h1').css({
    'color': '#2c3e50',
    'font-size': '32px'
});

// Добавление только одного свойства
$('h2').css('font-weight', 'bold');

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

$('h2').addClass('highlighted');
$('h3').removeClass('hidden');
$('h1').toggleClass('active');

Обработка событий заголовков

Zepto поддерживает работу с событиями через методы .on(), .off() и .trigger().

// Обработка клика на заголовок h1
$('h1').on('click', function() {
    $(this).css('color', 'red');
});

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

// Программное срабатывание события
$('h1').trigger('click');

Особое внимание уделяется событиям взаимодействия с пользователем, включая mouseover, mouseout, dblclick и keypress.

Итоговый синтаксис цепочек

Zepto позволяет строить цепочки методов для комплексной работы с заголовками без дублирования кода:

$('h2')
    .text('Обновлённый заголовок')
    .css({'color': '#e74c3c', 'font-weight': 'bold'})
    .addClass('updated')
    .on('click', function() {
        $(this).toggleClass('clicked');
    });

Такой подход делает код компактным и легко читаемым, одновременно объединяя выборку, манипуляцию содержимым, стилями и событиями в одной цепочке.

Оглавление