zepto和jquery的区别
1、针对移动端程序
zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),zepto是不支持IE浏览器的。
2、DOM操作的区别
添加id时jquery不会生效而zepto会生效。
3、事件触发的区别
使用jquery时load事件的处理函数不会执行;使用zepto时load事件的处理函数会执行。
4、事件委托的区别
zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件。
5、js精简方面
zepto是jquery的精简,针对移动端去除了大量jquery的兼容代码。
6、其他方面
zepto中没有为原型定义extend方法而jquery有;zepto的each方法只能遍历数组,不能遍历JSON对象。
一、支持的浏览器:Zepto不支持IE浏览器,目的是为了减小Zepto的体积;因为Zepto使用jQuery句法,所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中,而其他浏览器则能享受到Zepto在文件大小上的优势,然而它们两个的API不是完全兼容的。
二、Dom操作的区别:添加id时jQuery不会生效而Zepto会生效。
三、事件触发的区别:使用 jQuery 时 load 事件的处理函数不会执行;使用 Zepto 时 load 事件的处理函数会执行。
四、事件委托的区别:在 jQuery 中只会触发a上面的委托弹出”a事件“。Zepto中,document上所有的click委托事件都依次放入到一个队列中,点击的时候先看当前元素是不是a,符合则执行,然后查看是不是b,符合则执行。
五、width()和height()的区别:Zepto由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css('width')返回加border等的结果;jQuery会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)。
六、offset()的区别:Zepto返回{top,left,width,height};jQuery返回{width,height}。
参考资料来源:百度百科-jQuery
1、DOM操作的区别:添加id时jQuery不会生效而Zepto会生效;
2、事件触发的区别:使用jquery时load事件的处理函数不会执行;使用zepto时load事件的处理函数会执行;
3、事件委托的区别:zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件;
4、offset()的区别:zepto返回{top,left,width,height}; jquery返回{width,height}。zepto无法获取隐藏元素宽高,jquery可以;
5、、zepto中没有为原型定义extend方法而jquery有。
扩展资料:
DOM操作的区别:代码实现
// <p>jQuery <p>
(function($) {
$(function() {
var $insert = $('<p>jQuery 插入</p>', {
id: 'insert-by-jquery'
});
$insert.appendTo($('body'));
});
})(window.jQuery);
// <p id="insert-by-zepto">Zepto </p>
Zepto(function($) {
var $insert = $('<p>Zepto 插入</p>', {
id: 'insert-by-zepto'
});
$insert.appendTo($('body'));
});
jquery主要是兼容性好,可以跑在各种pc,移动上,好处是兼容各种浏览器,缺点是代码量大,同时考虑兼容,性能也不够好。
jq自身也注意到了这个总是,所有它的2.x版本是不支持ie6 7 8的,大致就是这些。
例如执行: $({}).bind('cust', function(){});
结果: TypeError: Object has no method 'addEventListener'
解决办法是创建一个脱离文档流的节点作为事件对象:
例如: $('
').bind('cust', function(){});
2. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
例如执行:$('[data-userid=123123123]')
结果:Error: SyntaxError: DOM Exception 12
解决办法: $('[data-userid="123123123]"') or $("[data-userid='123123123']")
3.Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
4.Zepto 的each 方法只能遍历 数组,不能遍历JSON对象
5.Zepto 的animate 方法参数说明 :
例如:$("data-userid='123123123'").animate({ opacity : 0},{duration:'slow'});
duration : 'slow' 是无效的,需要修改为 duration : 600