jQuery与Zepto的异同

相同点

Zepto.js号称移动版的jQuery，两者的API及其相似。zepto文件更加小，只有8k多，如果熟悉jQuery，可以很容易掌握Zepto。

不同之处

1. zepto为移动端设计，有一些基本的触摸事件，如（tap、swipe事件），zepto不支持iE浏览器。

2. DOM操作上有区别：Zepto能添加id，jQuery不能！
   (function($) {
   $(function() {
   var $insert = $('<p>jQuery 插入</p>', {
   id: 'insert-by-jquery'
   });
   $insert.appendTo($('body'));
   });
   })(window.jQuery); // <p>jQuery 插入<p>

   ---

   Zepto(function($) {  
       var $insert = $('<p>Zepto 插入</p>', {
           id: 'insert-by-zepto'
       });
       $insert.appendTo($('body'));
   }); // <p id="insert-by-zepto">Zepto 插入</p>
   

3. 事件触发的区别：Zepto能触发load事件，jQuery不能！
   (function($) {
   $(function() {
   $script = $('<script />', {
   src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
   id: 'ui-jquery'
   });

           $script.appendTo($('body'));
   
           $script.on('load', function() {
               console.log('jQ script loaded');
           });
      });
   })(window.jQuery);
   

---

    Zepto(function($) {  
        $script = $('<script />', {
            src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
            id: 'ui-zepto'
        });

        $script.appendTo($('body'));

        $script.on('load', function() {
            console.log('zepto script loaded');
        });
    });

4. 事件委托的区别
   var $doc = $(document);
   // Class 'a' bind event 'a'
   $doc.on('click', '.a', function () {
   alert('a事件');
   // Class 'a' change to class 'b'
   $(this).removeClass('a').addClass('b');
   });

   // Class 'b' bind event 'b'
   $doc.on('click', '.b', function () {
       alert('b事件');
   });
   

在 Zepto 中，当 a 被点击后，依次弹出了内容为”a事件“和”b事件“的弹出框。说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发 .a 上面的委托。

   在 Zepto 中代码解析的时候，document上所有的click委托事件都依次放入到一个队列中，点击的时候先看当前元素是不是.a，符合则执行，然后查看是不是.b，符合则执行。

这样的话，就导致如果.a的事件在前面，会先执行.a事件，然后class更改成b，Zepto再查看当前元素是不是.b，以此类推。
在 jQuery 中代码解析的时候，document上委托了2个click事件，点击后通过选择符进行匹配，执行相应元素的委托事件。
这样就很好的避免了在 Zepto 中的发生的情况。

5. width()和height()的区别
   Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width用.css('width')返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

6. offset()的区别
   // offset() {function}

    // @desc Zepto
    // @return top|left|width|height
   
    // @desc jQuery
    // @return width|height
   

7. Zepto无法获取隐藏元素宽高，jQuery 可以。

8. Zepto中没有为原型定义extend方法而jQuery有。

9. Zepto 的each 方法只能遍历 数组，不能遍历JSON对象。

---

随着 jQuery 2.x 的发布以及未来 3.0 对浏览器支持的划分，似乎找不到再使用 Zepto 的理由了。如果你真在乎文件大小，那你可以自行打包 jQuery 中需要的模块。这和 Zepto 是一样的，Zepto 官方提供的版本只打包了很基础的模块