Полный список методов манипуляции

Выбор элементов в Zepto осуществляется с помощью функции $(), аналогично jQuery. В качестве аргумента можно использовать CSS-селекторы, DOM-элементы, HTML-строки или массив элементов. Примеры:

var divs = $('div'); // все <div> на странице
var firstItem = $('#item'); // элемент с id="item"
var newElement = $('<p>Текст</p>'); // создание нового элемента

Проверка и фильтрация элементов выполняется методами filter(), not(), is():

$('li').filter('.active'); // только элементы с классом active
$('li').not('.disabled'); // исключает элементы с классом disabled
$('input').is(':checked'); // проверяет, отмечен ли хотя бы один

Работа с содержимым и атрибутами

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

$('#content').html(); // получить HTML
$('#content').html('<p>Новый контент</p>'); // установить HTML
$('#content').text(); // получить текст
$('#content').text('Новый текст'); // установить текст

Манипуляции с атрибутами и свойствами:

$('#link').attr('href'); // получить значение атрибута href
$('#link').attr('href', 'https://example.com'); // установить атрибут
$('#checkbox').prop('checked', true); // установить свойство checked
$('#checkbox').prop('checked'); // получить значение свойства

Работа с данными через data() обеспечивает удобное хранение пользовательских данных:

$('#item').data('id', 123); // установка
var id = $('#item').data('id'); // получение

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

Добавление, удаление и переключение классов:

$('#box').addClass('active'); // добавить класс
$('#box').removeClass('hidden'); // удалить класс
$('#box').toggleClass('highlight'); // переключить класс

Изменение CSS-свойств:

$('#box').css('color'); // получить значение свойства
$('#box').css('color', 'red'); // установить свойство
$('#box').css({
    width: '100px',
    height: '50px',
    background: '#eee'
}); // установка нескольких свойств

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

Вставка и удаление элементов:

$('<li>Новый</li>').appendTo('#list'); // вставка внутрь
$('#list').prepend('<li>В начало</li>'); // вставка в начало
$('#item').after('<div>Снизу</div>'); // вставка после
$('#item').before('<div>Сверху</div>'); // вставка до
$('#item').remove(); // удаление элемента
$('#item').empty(); // очистка содержимого

Клонирование элементов с сохранением событий:

var clone = $('#item').clone(true);
$('#list').append(clone);

События и управление ими

Привязка и удаление событий:

$('#btn').on('click', function() {
    alert('Нажатие');
});
$('#btn').off('click'); // удалить обработчик

События мыши и клавиатуры:

$('#input').on('focus blur', function() {
    $(this).toggleClass('focused');
});
$('#box').on('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
});

События пользовательские можно создавать и вызывать с помощью trigger:

$('#item').on('customEvent', function(e, data) {
    console.log(data);
});
$('#item').trigger('customEvent', {key: 'value'});

Эффекты и анимация

Скрытие и показ элементов:

$('#box').hide();
$('#box').show();
$('#box').toggle(); // переключение видимости

Анимации с плавным переходом:

$('#box').fadeIn();
$('#box').fadeOut();
$('#box').fadeToggle();
$('#box').slideUp();
$('#box').slideDown();
$('#box').slideToggle();

Настройка скорости анимации:

$('#box').fadeIn(500); // 500 мс
$('#box').slideUp('slow'); // predefined 'slow' или 'fast'

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

Получение размеров элементов:

var width = $('#box').width();
var height = $('#box').height();
var outerWidth = $('#box').outerWidth(true); // с учетом margin
var outerHeight = $('#box').outerHeight(true);

Работа с позиционированием:

var offset = $('#box').offset(); // позиция относительно документа
var position = $('#box').position(); // позиция относительно родителя
$('#box').offset({ top: 100, left: 50 }); // установка позиции

Итерации и обход коллекций

Перебор элементов с помощью each:

$('li').each(function(index, el) {
    $(el).text('Элемент ' + index);
});

Методы map и get для трансформации и получения массивов:

var ids = $('li').map(function() {
    return $(this).data('id');
}).get(); // возвращает обычный массив

Ajax и работа с данными

Основные методы Ajax в Zepto:

$.get('/api/data', function(response) {
    console.log(response);
});
$.post('/api/data', {id: 1}, function(response) {
    console.log(response);
});
$.ajax({
    url: '/api/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) { console.log(data); },
    error: function(xhr) { console.error(xhr); }
});

Управление JSONP для кросс-доменных запросов:

$.ajax({
    url: 'https://example.com/data?callback=?',
    dataType: 'jsonp',
    success: function(response) { console.log(response); }
});

Утилиты и вспомогательные методы

Проверка типа и работы с объектами:

$.isArray([1,2,3]); // true
$.isFunction(function(){}); // true
$.isPlainObject({a:1}); // true

Расширение объектов и объединение данных:

var obj1 = {a:1};
var obj2 = {b:2};
$.extend(obj1, obj2); // {a:1, b:2}

Сериализация форм:

var data = $('form').serialize(); // строка URL-encoded
var objData = $('form').serializeArray(); // массив объектов {name, value}

Поддержка готовности документа:

$(function() {
    console.log('DOM готов');
});

Отложенное выполнение с deferred и промисами:

var request = $.get('/api/data');
request.done(function(data){ console.log(data); });
request.fail(function(){ console.error('Ошибка'); });

Методы цепочек

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

$('#box')
    .addClass('active')
    .css('color', 'red')
    .slideDown(400)
    .on('click', function() { alert('Нажатие'); });

Цепочки обеспечивают компактный и читаемый код, позволяя последовательно применять несколько операций к одному набору элементов.

Оглавление