Инструменты разработчика

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

Работа с DOM

Выбор элементов

Для выбора элементов используется функция $, аналогичная jQuery:

var divs = $('div');
var activeItems = $('.active');
var main = $('#main');

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

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

  • html(content) — установка или получение HTML-содержимого:
$('#main').html('<p>Новый текст</p>');
var content = $('#main').html();
  • text(content) — работа с текстовым содержимым:
$('.title').text('Заголовок страницы');
var title = $('.title').text();
  • append, prepend, before, after — добавление элементов:
$('#main').append('<div>Новый блок</div>');
$('#main').prepend('<span>В начало</span>');
  • remove() — удаление элементов:
$('.old').remove();

Работа с атрибутами и свойствами

Методы attr и prop позволяют получать и изменять значения атрибутов и свойств DOM-элементов:

$('#link').attr('href', 'https://example.com');
var href = $('#link').attr('href');
$('#checkbox').prop('checked', true);

Классы и стили

  • addClass, removeClass, toggleClass — управление CSS-классами:
$('#main').addClass('highlighted');
$('#main').removeClass('hidden');
$('#main').toggleClass('active');
  • css — получение или установка стилей:
$('#main').css('color', 'red');
var color = $('#main').css('color');

Работа с событиями

Zepto обеспечивает компактный синтаксис для привязки и удаления событий.

  • on(event, selector, callback) — привязка события к элементу или делегирование:
$('#button').on('click', function() {
    alert('Кнопка нажата');
});

$('ul').on('click', 'li', function() {
    console.log('Нажат элемент списка');
});
  • off(event, selector, callback) — удаление обработчика:
$('#button').off('click');
  • События мыши, клавиатуры и форм работают аналогично:
$('input').on('focus', function() {
    $(this).css('border', '1px solid blue');
});
  • trigger(event) — вызов события программно:
$('#button').trigger('click');

Анимации и эффекты

Zepto поддерживает простые анимации через методы show, hide, fadeIn, fadeOut, slideDown, slideUp:

$('#panel').fadeIn(400);
$('#panel').fadeOut(400);
$('#menu').slideDown(300);
$('#menu').slideUp(300);

Методы принимают длительность в миллисекундах и опциональный callback.

Метод animate позволяет создавать произвольные анимации CSS-свойств:

$('#box').animate({width: '200px', height: '100px'}, 500, 'linear', function() {
    console.log('Анимация завершена');
});

Работа с AJAX

Zepto предоставляет методы для асинхронного обмена данными.

  • $.ajax — универсальный метод:
$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log(response);
    },
    error: function(xhr) {
        console.error('Ошибка запроса');
    }
});
  • Упрощённые методы $.get и $.post:
$.get('/api/data', {id: 10}, function(data) {
    console.log(data);
});

$.post('/api/save', {name: 'John'}, function(response) {
    console.log(response);
});
  • Метод $.getJSON для загрузки JSON:
$.getJSON('/api/data.json', function(data) {
    console.log(data);
});

Утилиты Zepto

Zepto содержит ряд полезных утилитарных функций:

  • $.extend(target, source1, source2...) — объединение объектов:
var defaults = {color: 'red', size: 10};
var options = {size: 20};
var settings = $.extend({}, defaults, options);
console.log(settings); // {color: 'red', size: 20}
  • $.map(array, callback) — преобразование массивов:
var numbers = [1, 2, 3];
var squares = $.map(numbers, function(n) { return n * n; });
console.log(squares); // [1, 4, 9]
  • $.each(collection, callback) — итерация по объектам и массивам:
$.each([1,2,3], function(index, value) {
    console.log(index, value);
});

$.each({a:1, b:2}, function(key, value) {
    console.log(key, value);
});
  • $.contains(parent, child) — проверка принадлежности элемента DOM:
var parent = document.getElementById('main');
var child = document.getElementById('sub');
console.log($.contains(parent, child)); // true или false

Работа с документом и окном

  • $(document).ready(callback) — выполнение кода после загрузки DOM:
$(document).ready(function() {
    console.log('DOM загружен');
});
  • $(window).on('resize', callback) — отслеживание изменений размера окна:
$(window).on('resize', function() {
    console.log('Размер окна изменён');
});
  • Методы scrollTop и scrollLeft позволяют управлять прокруткой:
$(window).scrollTop(100);
var scrollPos = $(window).scrollTop();

Расширяемость и плагины

Zepto поддерживает подключение плагинов через расширение прототипа:

$.fn.highlight = function(color) {
    return this.css('background-color', color);
};

$('#main').highlight('yellow');

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

$('#main').addClass('active').css('color', 'blue').fadeIn(300);

Особенности и ограничения

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

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

Оглавление