jQuery和Zepto有哪些区别-创新互联
小编给大家分享一下jQuery和Zepto有哪些区别,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是一家集网站建设,博乐企业网站建设,博乐品牌网站建设,网站定制,博乐网站建设报价,网络营销,网络优化,博乐网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。差异:1、Zepto中,针对移动端去除了大量jQuery的兼容代码;2、使用jQuery时load事件的处理函数不会执行;使用Zepto时load事件的处理函数会执行;3、zepto中没有为原型定义extend方法,而jquery有。
jQuery和Zepto的差异
1、Zepto更轻量级
2、Zepto是jQuery的精简,针对移动端去除了大量jQuery的兼容代码
3、部分API的实现方式不同
1)、针对移动端程序,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件、swipe事件),Zepto是不支持IE浏览器的。
2)、DOM操作的区别:添加id时jQuery不会生效而Zepto会生效
(function($) { $(function() { var $insert = $('jQuery 插入
', { id: 'insert-by-jquery' }); $insert.appendTo($('body')); }); })(window.jQuery); //jQuery 插入
Zepto(function($) { var $insert = $('
Zepto 插入
', { id: 'insert-by-zepto' }); $insert.appendTo($('body')); }); //Zepto 插入
3)、事件触发的区别:使用jquery时load事件的处理函数不会执行;使用zepto时load事件的处理函数会执行
(function($) { $(function() { $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 = $('', { 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中则委托成独立的多个事件
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对象。
jQuery 和 Zepto.js 表面看起来差不多,其实一些细节上差异很大,同时支持 jQuery 和 Zepto.js 是一件吃力不讨好的事情,这应该也是 Foundation 5 放弃支持 Zepto 的一个原因。
以上是jQuery和Zepto有哪些区别的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文标题:jQuery和Zepto有哪些区别-创新互联
文章来源:http://scyanting.com/article/cegcjp.html