Полный список методов выборки

Zepto.js предоставляет компактный и гибкий набор методов для работы с DOM, ориентированный на выборку элементов, манипуляции с ними и обработку событий. Основной принцип работы Zepto — цепочка методов и использование универсального селектора $(). Ниже представлен детальный разбор методов выборки и фильтрации элементов.

1. Основной селектор $()

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

Синтаксис:

var elements = $(selector);
  • selector — строка CSS-селектора, HTML-код или элемент DOM.
  • Возвращает объект Zepto, поддерживающий методы цепочек (.each(), .css(), .attr() и др.).

Примеры:

var divs = $('div');        // Выбор всех <div>
var header = $('#header');  // Выбор элемента с id="header"
var items = $('.item');     // Выбор всех элементов с классом "item"

Если передан HTML-код, создаётся новый элемент:

var newDiv = $('<div class="new"></div>');

2. Фильтрация выборки

Методы фильтрации позволяют сужать или изменять набор элементов после первоначального выбора.

  • .filter(selector|function) — возвращает только те элементы, которые соответствуют селектору или условию функции.
var visibleItems = $('.item').filter(':visible');
var firstItem = $('.item').filter(function(index, elem) {
    return index === 0;
});
  • .not(selector|function|element) — исключает элементы из набора, соответствующие селектору или условию функции.
var nonHiddenItems = $('.item').not('.hidden');
  • .has(selector) — возвращает элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору.
var parentsWithImages = $('div').has('img');
  • .is(selector|function|element) — проверяет, соответствует ли хотя бы один элемент набору условию.
if ($('#header').is(':visible')) { ... }

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

Zepto предоставляет методы для перемещения по дереву DOM относительно текущего набора элементов.

  • .children(selector) — выбирает прямых потомков элементов набора, фильтруя по селектору при необходимости.
var children = $('#menu').children('li');
  • .find(selector) — ищет все потомки элементов, соответствующие селектору, на любом уровне вложенности.
var links = $('#menu').find('a');
  • .parent() — возвращает непосредственных родителей элементов набора.
var parentDiv = $('.item').parent();
  • .parents(selector) — возвращает всех предков элементов, соответствующих селектору.
var containers = $('.item').parents('.container');
  • .closest(selector) — выбирает ближайшего предка, соответствующего селектору, включая сам элемент, если он подходит.
var closestForm = $(this).closest('form');
  • .siblings(selector) — возвращает все элементы на одном уровне вложенности с текущим элементом, исключая его самого, с возможностью фильтрации.
var siblings = $('#item2').siblings('.active');
  • .next() / .prev() — выбирают следующий или предыдущий соседний элемент соответственно.
var nextItem = $('.item.active').next();
var prevItem = $('.item.active').prev();
  • .nextAll() / .prevAll() — возвращают всех последующих или предыдущих соседей.
var nextItems = $('#start').nextAll('li');

4. Поиск по содержимому

Методы позволяют выбирать элементы, исходя из их текста или HTML-содержимого.

  • .contains(text) — возвращает элементы, содержащие указанную строку текста.
var itemsWithHello = $('p').filter(function() {
    return $(this).text().indexOf('Hello') !== -1;
});
  • .has(selector) — как упоминалось ранее, ищет элементы, содержащие определённые потомки.

5. Индексация и положение элемента в наборе

  • .eq(index) — выбирает элемент по индексу (0 — первый).
var secondItem = $('.item').eq(1);
  • .first() / .last() — выбирают первый или последний элемент в наборе.
var firstItem = $('.item').first();
var lastItem = $('.item').last();
  • .index() — возвращает индекс элемента относительно его родителя или позиции в наборе.
var position = $('.item.active').index();

6. Смешанные и универсальные методы

  • .add(selector|elements) — добавляет элементы к текущему набору.
var allItems = $('.item').add('#specialItem');

  • .andSelf() — возвращает текущий набор элементов вместе с предыдущим результатом цепочки (устаревающий метод, аналог .addBack() в jQuery).

  • .slice(start, end) — возвращает часть набора элементов по индексам.

var middleItems = $('.item').slice(1, 4);

7. Особенности работы Zepto

  • Все методы возвращают объект Zepto для поддержания цепочек.
  • Выборка работает с любыми CSS-селекторами, включая псевдоклассы :first, :last, :nth-child().
  • Zepto оптимизирован для мобильных браузеров и уменьшен по размеру по сравнению с jQuery, но поддерживает большинство методов выборки и навигации DOM.

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

Оглавление