（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
});
网友评论