Zepto与jQuery异同

(1)同

Zepto是jQuery的轻量级替代品,它的API与jquery基本一致,它的体积非常小,jQuery中常用的API和方法,Zepto基本都有,所以适用于移动端开发。相比于jQuery Mobile,Zepto更合适。

(2)异

(2.1)Zepto不支持IE浏览器

Zepto针对移动端程序开发,有一些基本的触摸事件,例如tap事件、swipe事件;
Zepto不支持IE浏览器,目的是为了减小Zepto的体积;
因为Zepto使用jQuery句法,所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中,而其他浏览器则能享受到Zepto在文件大小上的优势,然而它们两个的API不是完全兼容的,所以使用这种方法时一定要小心,并要做充分的测试。

(2.2)DOM操作的区别

添加id时,jQuery不会生效,Zepto会生效

(function($){
    //DOM操作,jquery添加id不会生效
    $(function(){
       var inSet = $('<p>Jquery</p>',
           {id : 'insetId'});
       inSet.appendTo($('body'));
    });
})(window.jQuery);

Zepto(function($){
    //DOM操作,zepto添加id生效
    $(function(){
        var inSet = $('<p>Zepto</p>',{id : 'insetId'});
        inSet.appendTo($('body'));
    });
});

(2.3)事件触发的区别

使用 jQuery 时 load 事件的处理函数不会执行;使用 Zepto 时 load 事件的处理函数会执行

(function($){
    //事件触发,load不会执行
    $(function(){
        var carryOutLoad = $('<script/>',
            {
                src : '../jquery-3.2.0.min.js',
                id : 'insetjQueryId'
            });
        carryOutLoad.appendTo($('body'));

        carryOutLoad.on('load', function() {
            console.log('jQ script loaded');    //未打印
        });
    });

})(window.jQuery);

Zepto(function($){
    //事件触发,load会执行
    $(function(){
        var carryOutLoad = $('<script/>',
            {
                src : '../zepto.min.js',
                id : 'insetZeptoId'
            });
        carryOutLoad.appendTo($('body'));
        carryOutLoad.on('load', function() {
            console.log('zepto loaded');
        });
    });
});

(2.4)事件委托的区别

(function($){
    $(document).on('click','.a',function(){
        alert('a事件');
        $(this).removeClass('a').addClass('b');
    });
    $(document).on('click','.b',function(){
        alert('b事件');
    });
    //弹出a事件,未弹出b事件
})(window.jQuery);

Zepto(function($){
    $(document).on('click','.c',function(){
        alert('c事件');
        $(this).removeClass('c').addClass('d');
    });
    $(document).on('click','.d',function(){
        alert('d事件');
    });
    //弹出c事件,接着弹出d事件
})

在Zepto中,当a被点击后,依次弹出了内容为”a事件“和”b事件“,说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中,document上所有的click委托事件都依次放入到一个队列中,点击的时候先看当前元素是不是.a,符合则执行,然后查看是不是.b,符合则执行。而在jQuery中,document上委托了2个click事件,点击后通过选择符进行匹配,执行相应元素的委托事件。

(2.5)width()和height()的区别

Zepto由盒模型(box-sizing)决定,用.css('width')返回带单位的width的结果,用.width()返回赋值的width,包含padding、border;
jQuery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)。
设置两个div:

<div id="oneBox" style="width: 200px;height: 200px;border:2px solid red;padding:10px;background:darkseagreen;"></div>
<div id="twoBox" style="width: 200px;height: 200px;border:2px solid green;padding:10px;background:palevioletred;"></div>

分别使用jquery与zepto来检验一下:

(function($){
    var oneBox = $('#oneBox');
    console.log(oneBox.width());    //200
})(window.jQuery);

Zepto(function($){
    var twoBox = $('#twoBox');
    console.log(twoBox.width());    //224,包含了width,border,padding,不包含margin
    console.log(twoBox.css('width'));   //200px,带单位的宽度值,不包含border,padding,margin
});

(2.6)offset()的区别

Zepto返回{top,left,width,height};
jQuery返回{top,left}
设置一个div:

<div class="getOffset" style="position:relative;top:40px;left:50px;"></div>
(function($){
    var getOffset = $('.getOffset');
    console.log(getOffset.offset());    //top: 568, left: 58
})(window.jQuery);

Zepto(function($){
    var getOffset = $('.getOffset');
    console.log(getOffset.offset());    //left: 58, top: 568, width: 1887, height: 0
});

原文链接:http://www.cnblogs.com/colima/p/5289386.html

推荐阅读更多精彩内容

  • 相同点 Zepto.js号称移动版的jQuery,两者的API及其相似。zepto文件更加小,只有8k多,如果熟悉...
    sdcV阅读 208评论 1 4
  • JQuery的源码看过吗?能不能简单概况一下它的实现原理? jQuery.fn的init方法返回的this指的是什...
    过往的雨阅读 775评论 0 10
  • 在线阅读 http://blog.poetries.top/FE-Interview-Questions 目录 $...
    poetries阅读 46,216评论 14 380
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 3,329评论 2 17
  • 告诉你,我不是托儿。我知道这句话似乎此地无银三百两,声明越郑重就越像个托儿。好了。这个话题不说了。言归正传。 我只...
    绿萝宝贝阅读 178评论 8 1