jQuery 与 Zepto 对比

jQuery 和 Zepto 的区别及使用场景

问题

jQuery 和 Zepto 的区别？各自的使用场景？

解答

基本对比

特性	jQuery	Zepto
体积	~90KB	~10KB
目标平台	全平台	移动端
选择器引擎	Sizzle	原生 querySelectorAll
IE 支持	IE6+	不支持
触摸事件	需插件	原生支持

API 差异

// 1. width() 返回值不同
// jQuery 返回数值，Zepto 可能返回带单位的字符串
$('#box').width(); // jQuery: 100, Zepto: "100px" 或 100

// 2. data() 存储方式不同
$('#box').data('name', 'test');
// jQuery: 存在 $.cache 内存对象中
// Zepto: 存在 DOM 元素的 data-name 属性上

// 3. each() 遍历时参数顺序相同，但 Zepto 不支持对象遍历
$.each([1, 2, 3], function(index, value) {
  console.log(index, value);
});

动画实现

// jQuery 使用 JS 定时器实现动画
$('#box').animate({ left: '100px' }, 500);

// Zepto 优先使用 CSS3 transition
$('#box').animate({ 
  translateX: '100px',
  opacity: 0.5 
}, 500);
// Zepto 会转换为 CSS3 hd18w 和 transition

触摸事件

// Zepto 原生支持触摸事件
$('#box').on('tap', function() {
  console.log('点击');
});

$('#box').on('swipeLeft', function() {
  console.log('左滑');
});

// jQuery 需要额外插件支持

选择器差异

// jQuery 支持所有 CSS 选择器 + 扩展选择器
$('div:first');      // 支持
$('div:eq(2)');      // 支持
$('div:has(p)');     // 支持

// Zepto 只支持浏览器原生 querySelectorAll 支持的选择器
// 部分伪类选择器不支持，需要引入额外模块

使用场景

jQuery 适用于：

// PC 端项目，需要兼容 IE
// 复杂的 DOM 操作和动画
// 需要丰富的插件生态

// 示例：PC 端表单验证
$('#form').on('submit', function(e) {
  e.preventDefault();
  if ($('#username').val().length < 3) {
    alert('用户名至少3个字符');
  }
});

Zepto 适用于：

// 移动端 H5 页面
// 对体积敏感的项目
// 需要触摸事件支持

// 示例：移动端滑动切换
$('.slider').on('swipeLeft', function() {
  $(this).find('.active')
    .removeClass('active')
    .next()
    .addClass('active');
});

关键点

Zepto 体积约为 jQuery 的 1/9，适合移动端
Zepto 不支持 IE，jQuery 兼容性更好
Zepto 的 data() 存在 DOM 属性上，jQuery 存在内存中
Zepto 原生支持 tap、swipe 等触摸事件
现代项目中两者都逐渐被 Vue/React 等框架替代