Адаптивные решения

Zepto.js — это минималистичная библиотека JavaScript, разработанная для упрощения работы с DOM, AJAX и событиями в браузере. Она во многом похожа на jQuery, но имеет меньший размер и ориентирована на современные браузеры. Основной объект библиотеки обозначается символом $ и используется для выборки элементов и выполнения над ними различных операций.

var elems = $('.class-name'); // выбор всех элементов с классом class-name

Выборка элементов возвращает объект Zepto, который поддерживает цепочку вызовов методов.

Работа с DOM

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

Методы .html() и .text() позволяют получать и задавать содержимое элементов:

$('.content').html('<p>Новый текст</p>'); // заменяет HTML внутри элементов
$('.content').text('Простой текст');     // заменяет текстовое содержимое

Добавление элементов в DOM осуществляется с помощью методов .append(), .prepend(), .before(), .after():

$('.list').append('<li>Новый элемент</li>');  // добавляет в конец
$('.list').prepend('<li>Первый элемент</li>'); // добавляет в начало

Удаление элементов производится методами .remove() и .empty():

$('.item').remove(); // полностью удаляет элементы
$('.container').empty(); // очищает содержимое контейнера

Атрибуты и CSS

Метод .attr() используется для работы с атрибутами:

$('.link').attr('href', 'https://example.com'); // задает атрибут
var href = $('.link').attr('href');            // получает значение

Метод .css() позволяет задавать стили или получать их значения:

$('.box').css('background-color', 'blue');    // устанавливает стиль
var color = $('.box').css('background-color'); // получает текущий стиль

События

Zepto предоставляет удобные методы для привязки событий: .on(), .off(), .trigger().

$('.button').on('click', function() {
    console.log('Клик по кнопке');
});

$('.button').off('click'); // удаляет привязанные события
$('.button').trigger('click'); // программно вызывает событие

Также поддерживаются делегированные события:

$(document).on('click', '.dynamic-item', function() {
    console.log('Нажат элемент, добавленный динамически');
});

Методы .hover() и .focus() упрощают работу с событиями наведения и фокуса:

$('.menu-item').hover(
    function() { $(this).addClass('hover'); },
    function() { $(this).removeClass('hover'); }
);

AJAX и работа с сервером

Zepto включает поддержку AJAX-запросов через методы .ajax(), .get(), .post(), .getJSON().

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

Упрощённые методы позволяют быстрее выполнять типовые запросы:

$.get('/data', function(data) {
    console.log(data);
});

$.post('/submit', {name: 'John'}, function(response) {
    console.log(response);
});

$.getJSON('/info.json', function(json) {
    console.log(json);
});

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

Методы .show(), .hide(), .fadeIn(), .fadeOut() позволяют управлять видимостью элементов и создавать плавные переходы.

$('.panel').hide();       // скрывает элемент
$('.panel').show();       // показывает элемент
$('.panel').fadeIn(500);  // плавное появление за 500 мс
$('.panel').fadeOut(300); // плавное скрытие за 300 мс

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

$('.box').animate({width: '200px', opacity: 0.5}, 400);

Модульность и расширения

Zepto поддерживает подключение модулей для работы с дополнительными функциями, такими как fx для анимаций, ajax для работы с сервером, event для событий, touch для сенсорных событий. Модули подключаются отдельными скриптами и расширяют основной функционал без увеличения размера базовой библиотеки.

Пример подключения модуля анимации:

<script src="zepto.min.js"></script>
<script src="zepto.fx.js"></script>

Работа с адаптивными решениями

Для адаптивного веб-дизайна Zepto позволяет динамически изменять классы, стили и структуру DOM в зависимости от размера окна или устройства.

function adjustLayout() {
    if ($(window).width() < 768) {
        $('.sidebar').hide();
        $('.content').css('width', '100%');
    } else {
        $('.sidebar').show();
        $('.content').css('width', '70%');
    }
}

$(window).on('resize', adjustLayout);
adjustLayout();

Мобильные события, такие как touchstart, touchmove, touchend, обеспечивают поддержку сенсорного взаимодействия:

$('.slider').on('touchstart', function(e) {
    console.log('Начало касания');
});

Методы работы с коллекциями

Zepto предоставляет функции для перебора и фильтрации элементов, такие как .each(), .map(), .filter():

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

var evenItems = $('.items').filter(function(idx, el) {
    return idx % 2 === 0;
});

Методы .first(), .last(), .eq() позволяют выбирать элементы по позициям в коллекции:

$('.items').first().css('color', 'red');
$('.items').last().css('color', 'blue');
$('.items').eq(2).css('color', 'green');

Zepto.js сочетает компактность и мощные возможности, позволяя создавать интерактивные, адаптивные и оптимизированные интерфейсы, минимизируя нагрузку на браузер и обеспечивая удобство работы с DOM, событиями и AJAX.

Оглавление