相同点
Zepto.js号称移动版的jQuery,两者的API及其相似。zepto文件更加小,只有8k多,如果熟悉jQuery,可以很容易掌握Zepto。
不同之处
zepto为移动端设计,有一些基本的触摸事件,如(tap、swipe事件),zepto不支持iE浏览器。
-
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>
-
事件触发的区别: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');
});
});
-
事件委托的区别
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 中的发生的情况。
width()和height()的区别
Zepto由盒模型(box-sizing)决定,用.width()返回赋值的width用.css('width')返回加border等的结果;jQuery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)。-
offset()的区别
// offset() {function}// @desc Zepto // @return top|left|width|height // @desc jQuery // @return width|height
Zepto无法获取隐藏元素宽高,jQuery 可以。
Zepto中没有为原型定义extend方法而jQuery有。
Zepto 的each 方法只能遍历 数组,不能遍历JSON对象。
随着 jQuery 2.x 的发布以及未来 3.0 对浏览器支持的划分,似乎找不到再使用 Zepto 的理由了。如果你真在乎文件大小,那你可以自行打包 jQuery 中需要的模块。这和 Zepto 是一样的,Zepto 官方提供的版本只打包了很基础的模块