Создание коллекций методов

Zepto — легковесная библиотека для работы с DOM, которая во многом повторяет подход jQuery, но с упором на компактность и скорость. Одной из ключевых особенностей является работа с коллекциями элементов. В Zepto коллекции создаются при помощи вызова функции $, которая возвращает объект, содержащий набор элементов DOM.

var elems = $('div.item');

elems в данном случае является объектом Zepto, содержащим все <div> с классом item. Все методы, применяемые к коллекции, распространяются на каждый элемент в наборе.

Методы обхода коллекции

Zepto предоставляет удобные методы для перебора элементов коллекции:

  • each(callback) Позволяет выполнять функцию для каждого элемента коллекции. Внутри callback this ссылается на текущий DOM-элемент, а первым аргументом передаётся индекс элемента.
$('li').each(function(index){
    console.log(index, this.textContent);
});
  • map(callback) Создает новый массив, результатом которого становятся значения, возвращаемые из callback для каждого элемента.
var texts = $('p').map(function(){
    return $(this).text();
}).toArray();

Метод toArray() используется для преобразования коллекции Zepto в стандартный массив JavaScript.

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

Коллекции в Zepto позволяют быстро изменять текст, HTML и атрибуты:

  • text([value]) Устанавливает или получает текстовое содержимое элементов.
$('.title').text('Новый заголовок');
  • html([value]) Аналогично text(), но работает с HTML-разметкой.
$('#container').html('<span>Содержимое</span>');
  • attr(name, [value]) Устанавливает или возвращает значение атрибута. Можно передавать объект для массовой установки атрибутов.
$('img').attr('src', 'image.jpg');
$('a').attr({href: '#', title: 'Ссылка'});
  • removeAttr(name) Удаляет указанный атрибут из всех элементов коллекции.

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

Zepto поддерживает методы для добавления, удаления и проверки классов:

  • addClass(className) Добавляет класс ко всем элементам.
$('.item').addClass('active');
  • removeClass(className) Удаляет класс из коллекции.
$('.item').removeClass('inactive');
  • toggleClass(className) Переключает наличие класса.
$('#menu').toggleClass('open');
  • hasClass(className) Проверяет, есть ли указанный класс хотя бы у одного элемента коллекции. Возвращает true или false.

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

Zepto позволяет добавлять, удалять и перемещать элементы в DOM через коллекции:

  • append(content) Добавляет содержимое в конец каждого элемента коллекции.
$('#list').append('<li>Новый элемент</li>');

  • prepend(content) Добавляет содержимое в начало элементов.

  • before(content) и after(content) Вставляют содержимое до или после каждого элемента коллекции.

  • remove() Удаляет все элементы коллекции из DOM.

  • empty() Удаляет все дочерние элементы и содержимое элементов коллекции, оставляя сами элементы на месте.

Работа с размерами и позициями

Методы для измерения и управления размерами элементов:

  • width([value]) и height([value]) Возвращают или устанавливают ширину и высоту элементов в пикселях.
$('.box').width(200).height(100);

  • offset() Возвращает объект с координатами top и left относительно документа.

  • position() Возвращает координаты относительно ближайшего родителя с позиционированием.

События и их обработка

Коллекции в Zepto позволяют работать с событиями с помощью цепочек методов:

  • on(event, [selector], handler) Привязывает обработчик события. Можно использовать делегирование через селектор.
$('button').on('click', function(){
    console.log('Кнопка нажата');
});

  • off(event, [handler]) Удаляет обработчик события.

  • trigger(event) Инициирует событие на всех элементах коллекции.

Цепочки методов (Chaining)

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

$('li')
    .addClass('highlight')
    .attr('data-active', 'true')
    .text('Обновлено');

Каждый метод возвращает коллекцию Zepto, что упрощает запись кода и делает его более компактным.

Преобразование и фильтрация коллекций

  • filter(selector | function) Оставляет только элементы, соответствующие условию.
$('li').filter('.active').css('color', 'red');

  • not(selector | function) Исключает элементы из коллекции.

  • find(selector) Возвращает потомков каждого элемента коллекции, соответствующих селектору.

$('#menu').find('li').addClass('submenu-item');
  • children([selector]) Возвращает только непосредственных потомков элементов коллекции.

Закрепление ссылок на элементы

Методы eq(index), first(), last() и slice(start, end) позволяют работать с отдельными элементами коллекции, сохраняя все возможности методов Zepto:

$('li').eq(0).addClass('first-item');
$('li').last().addClass('last-item');

eq() возвращает коллекцию, состоящую из одного элемента, что удобно для последующей работы с методами библиотеки.

Преимущества коллекций Zepto

  1. Лёгкость и компактность — минимальный размер по сравнению с jQuery.
  2. Единый интерфейс для множества методов — все манипуляции и события применяются одинаково к коллекциям.
  3. Поддержка цепочек — код получается лаконичным и читаемым.
  4. Совместимость с современными браузерами — не требует полифилов для большинства операций с DOM.

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

Оглавление