Модуль selector

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

Основная функция $

Главный механизм выбора элементов — функция $. Она может принимать:

  • CSS-селектор в виде строки;
  • HTML-разметку для создания новых элементов;
  • DOM-элемент или массив элементов;
  • Функцию, которая будет вызвана при готовности документа.

Пример базового использования:

var elems = $('.item');       // выбор всех элементов с классом item
var newElem = $('<div></div>'); // создание нового div
var body = $(document.body);  // обертка существующего элемента

Функция $ всегда возвращает объект Zepto, который содержит выбранные элементы и предоставляет методы для работы с ними.

Поддерживаемые селекторы

Zepto поддерживает стандартные CSS-селекторы:

  • ID: $('#id')
  • Класс: $('.class')
  • Тег: $('div')
  • Атрибуты: $('[type="text"]')
  • Псевдоклассы: :first, :last, :nth-child(n), :not(selector)

Пример фильтрации по атрибуту:

var inputs = $('input[type="checkbox"]');

Важно, что Zepto использует встроенные методы браузера (querySelectorAll) там, где это возможно, что обеспечивает высокую производительность.

Работа с множественными элементами

Результат $ — это массивоподобная структура с методами коллекции:

var items = $('.item');
console.log(items.length); // количество найденных элементов
items.each(function(index, el) {
    console.log(el.tagName);
});

Метод each обеспечивает итерацию по элементам с передачей индекса и DOM-узла. Внутри функции this ссылается на текущий элемент.

Фильтрация элементов

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

  • .filter(selector|function) — оставляет элементы, удовлетворяющие условию;
  • .not(selector|function) — исключает элементы, соответствующие условию;
  • .find(selector) — поиск потомков внутри выбранных элементов.

Примеры:

var visibleItems = $('.item').filter(':visible');
var nonHidden = $('.item').not('.hidden');
var linksInContainer = $('#container').find('a');

Фильтры можно комбинировать, что позволяет строить сложные цепочки поиска без лишних переменных.

Создание и вставка элементов

Zepto позволяет создавать элементы из строки HTML и сразу вставлять их в DOM:

var newDiv = $('<div class="box">Контент</div>');
$('#container').append(newDiv);

Методы вставки:

  • .append(content) — добавить внутрь элемента;
  • .prepend(content) — добавить внутрь в начало;
  • .before(content) — добавить перед элементом;
  • .after(content) — добавить после элемента.

Эти методы принимают как строки HTML, так и объекты Zepto или массивы DOM-элементов.

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

Модуль selector включает методы для перемещения по дереву DOM:

  • .parent() — родительский элемент;
  • .children() — непосредственные дочерние элементы;
  • .siblings() — элементы на одном уровне;
  • .closest(selector) — ближайший предок, подходящий под селектор.

Примеры:

var parent = $('.item').parent();
var siblings = $('#item1').siblings();
var closestForm = $('.input-field').closest('form');

Эти методы возвращают объект Zepto, что позволяет продолжать цепочку вызовов.

Проверка соответствия селектору

Метод .is(selector) позволяет определить, удовлетворяет ли элемент определенному условию:

if ($('#btn').is(':disabled')) {
    console.log('Кнопка заблокирована');
}

Он возвращает булево значение, что удобно для условных проверок без перебора коллекции.

Особенности производительности

  • Zepto минимизирует использование циклов, где возможно применяет нативные методы браузера.
  • Поддерживает делегирование событий через селекторы.
  • Легковесный и быстрый в сравнении с более крупными библиотеками, такими как jQuery, особенно для мобильных устройств.

Совместимость с jQuery

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

Итоговое наблюдение

Модуль selector является фундаментальной частью Zepto, обеспечивая компактный и мощный инструмент для работы с DOM. Его ключевые возможности — выбор элементов через CSS-селекторы, фильтрация, навигация, создание и вставка новых узлов, что позволяет строить динамический и отзывчивый интерфейс без лишнего кода.

Оглавление