相同點(diǎn)

Zepto.js號(hào)稱(chēng)移動(dòng)版的jQuery择葡，兩者的API及其相似肴茄。zepto文件更加小纯丸，只有8k多偏形，如果熟悉jQuery，可以很容易掌握Z(yǔ)epto觉鼻。

不同之處

1. zepto為移動(dòng)端設(shè)計(jì)俊扭，有一些基本的觸摸事件，如（tap坠陈、swipe事件）萨惑，zepto不支持iE瀏覽器捐康。

2. DOM操作上有區(qū)別：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. 事件觸發(fā)的區(qū)別：Zepto能觸發(fā)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. 事件委托的區(qū)別
   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 中姐仅，當(dāng) a 被點(diǎn)擊后花枫，依次彈出了內(nèi)容為”a事件“和”b事件“的彈出框。說(shuō)明雖然事件委托在.a上可是卻也觸發(fā)了.b上的委托掏膏。但是在 jQuery 中只會(huì)觸發(fā) .a 上面的委托劳翰。

   在 Zepto 中代碼解析的時(shí)候，document上所有的click委托事件都依次放入到一個(gè)隊(duì)列中馒疹，點(diǎn)擊的時(shí)候先看當(dāng)前元素是不是.a佳簸，符合則執(zhí)行，然后查看是不是.b颖变，符合則執(zhí)行生均。

這樣的話，就導(dǎo)致如果.a的事件在前面腥刹，會(huì)先執(zhí)行.a事件疯特，然后class更改成b，Zepto再查看當(dāng)前元素是不是.b肛走，以此類(lèi)推。
在 jQuery 中代碼解析的時(shí)候录别，document上委托了2個(gè)click事件朽色，點(diǎn)擊后通過(guò)選擇符進(jìn)行匹配，執(zhí)行相應(yīng)元素的委托事件组题。
這樣就很好的避免了在 Zepto 中的發(fā)生的情況葫男。

5. width()和height()的區(qū)別
   Zepto由盒模型(box-sizing)決定，用.width()返回賦值的width用.css('width')返回加border等的結(jié)果崔列；jQuery會(huì)忽略盒模型梢褐，始終返回內(nèi)容區(qū)域的寬/高(不包含padding、border)赵讯。

6. offset()的區(qū)別
   // offset() {function}

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

7. Zepto無(wú)法獲取隱藏元素寬高盈咳，jQuery 可以。

8. Zepto中沒(méi)有為原型定義extend方法而jQuery有边翼。

9. Zepto 的each 方法只能遍歷 數(shù)組鱼响，不能遍歷JSON對(duì)象。

隨著 jQuery 2.x 的發(fā)布以及未來(lái) 3.0 對(duì)瀏覽器支持的劃分组底，似乎找不到再使用 Zepto 的理由了丈积。如果你真在乎文件大小筐骇，那你可以自行打包 jQuery 中需要的模塊。這和 Zepto 是一樣的江滨，Zepto 官方提供的版本只打包了很基礎(chǔ)的模塊