jQuery和Zepto的差异是什么？

DOM操作的区别：

DOM 操作在添加id时，jQuery不会生效，而Zepto会生效。

jQuery操作的 ul 上的 id 不会被添加。

(function($) {
  $(function() {
    var $list = $('<ul><li>jQuery 插入</li></ul>', {
      id: 'insert-by-jquery'
    });
    $list.appendTo($('body'));
  });})(window.jQuery);

Zepto 可以在 ul 上添加 id。

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

事件触发的区别：

使用jquery时load事件的处理函数不会执行；

(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时load事件的处理函数会执行

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');
    });});

事件委托的区别：

zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件

API 方面的区别

width() 和 height() 的区别

在Zepto和jQuery中使用width() 或 height()获取的值是不一样的：

• Zepto 由盒模型(box-sizing)决定；

• jQuery 会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。

jQuery官方的说明：

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box . To avoid this penalty, use .css("width") rather than .width() .

解决方式就是使用 .css('width') 而不是 .width() 。下面我们举个叫做《边框三角形宽高的获取》的栗子来说明这个问题。

首先用下面的 HTML 和 CSS 画了一个小三角形吧。

// html
<div class="caret"></div>

// css
.caret {
    width: 0;
    height: 0;
    border-width: 0 20px 20px;
    border-color: transparent transparent blue; 
    border-style: none dotted solid;
}

• jQuery 使用 .width() 和 .css('width') 都返回 ，高度也一样；

• Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。
  所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height()。

offset()的区别：

Zepto offset()处理角度与jQuery不同。在Zepto中，offset()会获取并返回 top、left、width、height四个值；在jquery中，offset()就只获取并返回width、height两个值。

获取隐藏元素width和height的区别

如果是隐藏元素，Zepto无法获取其宽高；但jquery可以获取隐藏元素的宽高。

extend() 的区别

zepto中没有为原型定义extend方法，而jquery有。

jQuery 在原型上拓展方法使用的方式是：

// For example
// Extend a function named 'sayHello' to the protorype of jQuery
(function($) {
    $.fn.extend({
        sayHello: function() {
            $(this).html('Hello !');
        }
    });
})(window.jQuery);

Zepto 中并没有为原型定义extend方法，所以如果要是要在 Zepto 的原型上拓展方法可以使用的方式是：

// For example
// Extend a function named 'sayHello' to the protorype of Zepto
Zepto(function($) {
    sayHello: function() {
        $(this).html('Hello !');
    }
});

each方法的区别

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

clone()的区别

Zepto clone()不支持传递参数来克隆事件处理程序，但jQuery支持。

更多jQuery相关技术文章，请访问 jQuery答疑 栏目进行学习！！

以上就是jQuery和Zepto的差异是什么？的详细内容，更多请关注易知道|edz.cc其它相关文章！