Zepto.js 完整教程

目录

  1. 什么是 Zepto.js？
  2. 为什么选择 Zepto.js？
  3. 环境搭建与引入
  4. 核心概念与 API
    • 选择器
    • 操作 DOM
    • 事件处理
    • Ajax 请求
    • 动画效果
  5. 实战示例：一个简单的待办事项应用
  6. Zepto.js 与 jQuery 的异同
  7. 总结与学习资源

什么是 Zepto.js？

Zepto.js 是一个轻量级的、针对现代高级浏览器的 JavaScript 库，它被设计为 jQuery 的一个替代品，拥有几乎与 jQuery 相同的 API。

zepto.js 教程
（图片来源网络，侵删）

它的核心目标是：提供一个非常小（约 5-20KB）、快速、拥有与 jQuery 兼容 API 的库，用于移动端 Web 开发。

关键特性：

  • 轻量级： 压缩和 gzip 后非常小,适合移动端和网络环境较差的场景。
  • jQuery 语法兼容： 如果你熟悉 jQuery，那么你几乎不需要学习任何新语法就能使用 Zepto。
  • 针对移动端优化： 内置了触摸事件（tap, swipe 等）和一些移动端特有的方法。
  • 模块化设计： Zepto 是模块化的，你可以只引入你需要的模块,进一步减小体积。

为什么选择 Zepto.js？

在如今拥有强大原生 API（如 querySelector、fetch）和现代框架（如 React, Vue, Angular）的时代，Zepto.js 的使用场景已经有所变化,但它在某些特定场景下仍然非常有价值：

  • 维护旧项目： 许多旧的移动端 H5 项目（如微信内的活动页面）是基于 Zepto 构建的,维护和开发新功能时仍然需要它。
  • 追求极致性能和体积： 对于一个极其简单的页面，引入一个 20KB 的库可能比引入一个 100KB 的框架更合适。
  • 快速原型开发： 如果你需要快速验证一个想法，并且希望使用熟悉的 jQuery 风格代码，Zepto 是一个不错的选择。
  • 作为学习工具： 通过阅读 Zepto 的源码，可以很好地理解一个库的核心实现原理,非常适合前端初学者。

环境搭建与引入

Zepto 的使用非常简单，就像使用 jQuery 一样。

zepto.js 教程
（图片来源网络，侵删）

直接引入 CDN (最简单)

这是最快捷的方式,适合学习和快速开发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Zepto.js Demo</title>
    <!-- 引入 Zepto.js 核心 -->
    <script src="https://cdn.jsdelivr.net/npm/zepto@1.0.0/dist/zepto.min.js"></script>
</head>
<body>
    <h1>Hello, Zepto.js!</h1>
    <div id="box">这是一个盒子</div>
    <script>
      // 确保文档加载完成后再执行代码
      $(function() {
        // Zepto 代码写在这里
        console.log('Zepto 已加载并准备就绪!');
        // 选择元素并修改其样式
        $('#box').css('color', 'blue');
      });
    </script>
</body>
</html>

注意： $(function() { ... }); 是 Zepto 中等待 DOM 文档加载完成的简写，等同于 jQuery 的 $(document).ready(function() { ... });。

使用构建工具 (推荐用于项目)

Zepto 是模块化的，你可以使用 zepto 命令行工具来构建一个只包含你需要的模块的定制版本。

  1. 安装 Node.js

  2. 全局安装 Zepto CLI:

    npm install -g zepto

  3. 初始化项目并构建：

    # 创建一个新目录
mkdir my-zepto-project
cd my-zepto-project
# 初始化 package.json (可选)
npm init -y
# 创建构建配置文件 zepto.json
# 在这个文件里，你可以指定需要的模块
#  ["zepto", "event", "ajax", "form", "touch"]
echo '{"events": "zepto", "ajax": "zepto", "touch": "zepto"}' > zepto.json
# 构建自定义的 zepto.min.js
zepto

执行后，你会在项目根目录下得到一个 zepto.min.js 文件，将它引入你的 HTML 文件即可。

核心概念与 API

Zepto 的 API 与 jQuery 高度兼容,下面我们通过对比来学习。

选择器

与 jQuery 完全相同，使用 CSS 选择器来选取 DOM 元素。

// 选择单个元素
var $header = $('h1');
// 选择多个元素
var $paragraphs = $('p');
// 使用类选择器
var $activeItems = $('.active');
// 使用 ID 选择器
var $mainContent = $('#main-content');
// 组合选择器
var $linksInNav = $('nav a');

操作 DOM

Zepto 提供了一系列方法来操作、创建和插入 DOM 元素。

获取和设置属性

// 获取属性
var src = $('#my-image').attr('src');
// 设置属性
$('#my-image').attr('alt', 'A beautiful picture');
// 设置多个属性
$('#my-link').attr({
    'href': 'https://example.com',
    'target': '_blank'
});

修改 CSS

// 设置单个样式
$('#box').css('color', 'red');
// 设置多个样式
$('#box').css({
    'background-color': '#f0f0f0',
    'border': '1px solid #ccc',
    'padding': '10px'
});
// 获取样式
var width = $('#box').css('width');
// 修改 HTML 内容
$('#container').html('<p>新的 HTML 内容</p>');
// 修改纯文本内容
$('#title').text('新的标题');
// 获取 HTML 和文本
var content = $('#container').html();
var text = $('#title').text();

添加和移除元素

// 在内部末尾添加 HTML
$('#list').append('<li>Item 4</li>');
// 在内部开头添加 HTML
$('#list').prepend('<li>Item 0</li>');
// 在外部后面添加 HTML
$('#list').after('<p>列表后面</p>');
// 在外部前面添加 HTML
$('#list').before('<p>列表前面</p>');
// 移除元素
$('.inactive').remove();
// 清空元素内容
$('#list').empty();

事件处理

Zepto 提供了标准的事件绑定方法,并且增加了移动端常用的事件。

标准事件

// 点击事件
$('#button').on('click', function() {
    alert('按钮被点击了!');
});
// 或者使用简写
$('#button').click(function() {
    alert('按钮被点击了!');
});
// 移除事件
$('#button').off('click');

移动端特有事件 (Zepto 的亮点)

// tap 事件：轻触（比 click 更快响应）
$('#tap-me').on('tap', function() {
    console.log('Tap 事件触发!');
});
// swipe 事件：滑动
$('#swipe-area').on('swipe', function(e) {
    console.log('滑动方向:', e.direction); // 'left', 'right', 'up', 'down'
});
// longTap 事件：长按
$('#long-press-me').on('longTap', function() {
    console.log('长按触发!');
});
// 单指/双指缩放事件
$('#zoom-area').on('pinchIn', function() {
    console.log('双指缩小');
}).on('pinchOut', function() {
    console.log('双指放大');
});

Ajax 请求

Zepto 的 Ajax API 与 jQuery 的 $.ajax 非常相似。

// GET 请求
$.get('/api/user/1', function(data) {
    console.log('获取用户数据:', data);
}, 'json'); // 指定返回数据类型
// POST 请求
$.post('/api/login', {
    username: 'john',
    password: 'secret'
}, function(response) {
    console.log('登录响应:', response);
});
// 更强大的 $.ajax 方法
$.ajax({
    url: '/api/data',
    type: 'GET', // 或 'POST'
    dataType: 'json', // 预期服务器返回的数据类型
    data: { id: 123 },
    success: function(data) {
        console.log('请求成功:', data);
    },
    error: function(xhr, type, error) {
        console.error('请求失败:', error);
    },
    complete: function() {
        console.log('请求完成 (无论成功失败)');
    }
});

动画效果

Zepto 提供了一些简单实用的动画方法。

// 显示/隐藏
$('#box').show();   // 显示
$('#box').hide();   // 隐藏
$('#box').toggle(); // 切换显示/隐藏状态
// 淡入淡出
$('#box').fadeIn(500); // 500ms 内淡入
$('#box').fadeOut(500); // 500ms 内淡出
$('#box').fadeToggle(500);
// 滑动
$('#box').slideDown(500); // 向下滑动显示
$('#box').slideUp(500);   // 向上滑动隐藏
$('#box').slideToggle(500);
// 自定义动画
$('#box').animate({
    'opacity': 0.5,
    'left': '100px',
    'width': '200px'
}, 300, function() {
    console.log('动画完成!');
});

实战示例：一个简单的待办事项应用

让我们用 Zepto.js 来创建一个可以添加、删除和标记完成状态的待办事项列表。

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">Zepto Todo App</title>
    <style>
        body { font-family: sans-serif; background: #f4f4f4; padding: 20px; }
        #app { max-width: 600px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        #todo-input { width: 70%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        #add-btn { width: 25%; padding: 10px; background: #5cb85c; color: white; border: none; border-radius: 4px; cursor: pointer; }
        #add-btn:hover { background: #4cae4c; }
        #todo-list { list-style: none; padding: 0; margin-top: 20px; }
        .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee; }
        .todo-item.completed .todo-text { text-decoration: line-through; color: #aaa; }
        .delete-btn { background: #d9534f; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
        .delete-btn:hover { background: #c9302c; }
    </style>
</head>
<body>
    <div id="app">
        <h1>Zepto Todo List</h1>
        <div>
            <input type="text" id="todo-input" placeholder="添加新任务...">
            <button id="add-btn">添加</button>
        </div>
        <ul id="todo-list"></ul>
    </div>
    <!-- 引入 Zepto.js -->
    <script src="https://cdn.jsdelivr.net/npm/zepto@1.0.0/dist/zepto.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript (app.js)

// 等待 DOM 加载完成
$(function() {
    const $todoInput = $('#todo-input');
    const $addBtn = $('#add-btn');
    const $todoList = $('#todo-list');
    // 从 localStorage 加载待办事项
    let todos = JSON.parse(localStorage.getItem('todos')) || [];
    // 渲染待办列表
    function renderTodos() {
        $todoList.empty(); // 清空列表
        todos.forEach((todo, index) => {
            const $li = $('<li>').addClass('todo-item');
            if (todo.completed) {
                $li.addClass('completed');
            }
            $li.html(`
                <span class="todo-text">${todo.text}</span>
                <button class="delete-btn" data-index="${index}">删除</button>
            `);
            $todoList.append($li);
        });
        // 保存到 localStorage
        localStorage.setItem('todos', JSON.stringify(todos));
    }
    // 添加待办事项
    function addTodo() {
        const text = $todoInput.val().trim();
        if (text) {
            todos.push({ text: text, completed: false });
            $todoInput.val(''); // 清空输入框
            renderTodos();
        }
    }
    // 切换完成状态
    function toggleCompleted(index) {
        todos[index].completed = !todos[index].completed;
        renderTodos();
    }
    // 删除待办事项
    function deleteTodo(index) {
        todos.splice(index, 1);
        renderTodos();
    }
    // 事件绑定
    $addBtn.on('tap', addTodo); // 使用 tap 事件更适合移动端
    $todoInput.on('keypress', function(e) {
        if (e.which === 13) { // 回车键
            addTodo();
        }
    });
    // 使用事件委托来处理动态添加的元素的事件
    $todoList.on('tap', '.todo-text', function() {
        const index = $(this).siblings('.delete-btn').data('index');
        toggleCompleted(index);
    });
    $todoList.on('tap', '.delete-btn', function() {
        const index = $(this).data('index');
        deleteTodo(index);
    });
    // 初始渲染
    renderTodos();
});

Zepto.js 与 jQuery 的异同

相同点:

  • 核心语法: 选择器、链式调用、大部分方法名和参数都相同。
  • 设计哲学: 都致力于简化 DOM 操作、事件处理和 Ajax 请求。

不同点 (Zepto 的特点):

特性 Zepto.js jQuery
体积 极小 (约 5-20KB) 相对较大 (约 30KB+)
兼容性 现代浏览器 (支持 HTML5) 广泛兼容 (包括 IE6+ 等旧浏览器)
模块化 是，可按需构建 不是，所有功能都打包在一起
移动端事件 内置 (tap, swipe, pinch 等) 需要额外插件支持
部分 API 缺少 一些 jQuery 中不常用的方法 (如 .andSelf(), .offsetParent()) API 非常全面
浏览器扩展 不支持 支持
动画 基于 CSS transitions，性能更好 基于 JavaScript，更灵活但可能稍慢

总结与学习资源

Zepto.js 是一个优秀、专注且高效的工具，它并非万能，但在其擅长的领域——移动端 Web 开发和对体积敏感的项目中，它表现得非常出色，如果你熟悉 jQuery，那么切换到 Zepto 的学习成本几乎为零。

学习资源:

  • 官方文档 (英文): zeptojs.com - 这是最权威、最准确的资料。
  • GitHub 仓库: github.com/madrobby/zepto - 可以查看源码,了解其实现原理。
  • jQuery 文档: api.jquery.com - 由于 API 高度兼容，jQuery 文档是学习 Zepto 方法的绝佳补充。

希望这份教程能帮助你顺利入门 Zepto.js！