Селекторы элементов

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

Базовые селекторы

Поддерживаются простые CSS-селекторы: имена тегов ($('div')), идентификаторы ($('#main')) и классы ($('.item')). При обращении к идентификатору выбирается один элемент, но коллекция остаётся массивоподобной, что упрощает единый интерфейс взаимодействия.

Особенность: если элемент не найден, возвращается пустая коллекция. Это избавляет от необходимости проверок на null перед вызовом методов.

Составные селекторы

Возможно комбинирование селекторов в одном выражении. Примером служит выборка всех пунктов списка внутри контейнера с классом menu:

$('.menu li')

Zepto интерпретирует выражение в стиле CSS и возвращает коллекцию всех подходящих элементов в порядке их обнаружения в документе.

Контекстные селекторы

Для повышения производительности допускается указание контекста. Контекстом является DOM-узел или коллекция Zepto, относительно которой выполняется поиск:

$('li', container)

Контекст ограничивает область выборки и уменьшает количество обходов дерева.

Атрибутные и псевдо-селекторы

Библиотека поддерживает селекторы атрибутов:

$('input[type="text"]')

Возможны проверки на наличие атрибутов, совпадение значений и префиксные соответствия. Поддерживается часть псевдоселекторов уровня CSS3, включая :first-child, :last-child, :not() и некоторые структурные варианты. Реализация ориентирована на компактность и скорость, поэтому спектр псевдоселекторов уже, чем в jQuery.

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

После получения коллекции выполняются дополнительные выборки. Метод .filter() принимает селектор или функцию и возвращает подмножество:

$('li').filter('.active')

При передаче функции аргументом становится DOM-элемент коллекции; функция должна вернуть булево значение.

Метод .find() ищет соответствия внутри текущей выборки:

$('.menu').find('a')

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

Навигация по DOM

Для перемещения по структуре документа используются методы .parent(), .children(), .siblings() и .closest(). Они возвращают новые коллекции, сохраняя цепочку вызовов:

$('.item').parent().siblings()

.closest() поднимается вверх от текущего элемента, пока не будет найден селектор или достигнут корень документа.

Индексация и выбор по позиции

Доступ к элементу по индексу осуществляется через eq():

$('li').eq(0)

Возвращается коллекция из одного элемента. Для получения чистого DOM-объекта используется [0] или метод .get(index).

Производительность селекции

Zepto оптимизирует выборку за счёт прямого обращения к querySelectorAll, избегая лишней обёртки. Указание контекста, использование более узких селекторов и исключение сложных псевдоселекторов способствуют более быстрому выполнению. В отличие от jQuery, отсутствует поддержка некоторых старых браузеров, что позволяет сократить код и ускорить операции.

Работа с динамически изменяемым DOM

Коллекции Zepto являются снимком состояния DOM на момент селекции. При последующих изменениях документа коллекция не обновляется автоматически. В сценариях, где требуется актуальная выборка, повторный вызов $() обеспечивает получение текущих элементов.