1.总括:Zepto的主页说,会用jQuery就会用Zepto.
-Zepto更轻量级。
-Zepto是jQuery的精简,针对移动端去除了大量的jQuery的兼容代码。
-部分API的实现方式不同。
2.详情:
1.针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的。
并非Zepto的设计不足,而是为了降低文件大小,使用起来更为轻便。
2.DOM操作的区别:添加id时jQuery不会生效而Zepto会生效。
(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.事件触发的区别:使用jquery时load事件的处理函数不会执行;使用zepto时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(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.事件委托的区别:zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件。
var $doc = $(document);
$doc.on('click', '.a', function () {
alert('a事件');
$(this).removeClass('a').addClass('b');
});
$doc.on('click', '.b', function () {
alert('b事件');
});
在Zepto中,当a被点击后,依次弹出了内容为”a事件“和”b事件“,说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中,document上所有的click委托事件都依次放入到一个队列中,点击的时候先看当前元素是不是.a,符合则执行,然后查看是不是.b,符合则执行。而在jQuery中,document上委托了2个click事件,点击后通过选择符进行匹配,执行相应元素的委托事件。
5.width() 与 height()的区别:zepto由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css('width')返回border等的结果;jquery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border).
6.offset()的区别:zepto返回{top,left,width,height}; jquery返回{width,height}。zepto无法获取隐藏元素宽高,jquery可以
7.zepto中没有为原型定义extend方法而jquery有。
8.zepto的each方法只能遍历数组,不能遍历JSON对象。