Zepto 最初是为移动端开发的库, 是 jQuery 的轻量级替代品, 因为它的 API 和 jQuery 相似, 而文件更小. 那么 jQuery 和 zepto 的区别有哪些? 下面本篇文章给大家介绍一下, 希望对大家有所帮助.
jQuery 和 zepto 的区别
1, 针对移动端程序, Zepto 有一些基本的触摸事件可以用来做触摸屏交互 (tap 事件, swipe 事件),Zepto 是不支持 IE 浏览器的, 这不是 Zepto 的开发者 Thomas Fucks 在跨浏览器问题上犯了迷糊, 而是经过了认真考虑后为了降低文件尺寸而做出的决定, 就像 jQuery 的团队在 2.0 版中不再支持旧版的 IE(6 7 8) 一样. 因为 Zepto 使用 jQuery 句法, 所以它在文档中建议把 jQuery 作为 IE 上的后备库. 那样程序仍能在 IE 中, 而其他浏览器则能享受到 Zepto 在文件大小上的优势, 然而它们两个的 API 不是完全兼容的, 所以使用这种方法时一定要小心, 并要做充分的测试.
2,Dom 操作的区别: 添加 id 时 jQuery 不会生效而 Zepto 会生效.
- (function($) {
- $(function() {
- var $insert = $('<p>jQuery 插入</p>', {
- id: 'insert-by-jquery'
- });
- $insert.appendTo($('body'));
- });
- })(Windows.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');
- });
- });
- })(Windows.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, 事件委托的区别:
- 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}.
7,Zepto 无法获取隐藏元素宽高, jQuery 可以.
8,Zepto 中没有为原型定义 extend 方法而 jQuery 有.
9,Zepto 的 each 方法只能遍历 数组, 不能遍历 JSON 对象.
10,Zepto 在操作 dom 的 selected 和 checked 属性时尽量使用 prop 方法, 在读取属性值的情况下优先于 attr.Zepto 获取 select 元素的选中 option 不能用类似 jQuery 的方法 $('option[selected]'), 因为 selected 属性不是 CSS 的标准属性. 应该使用 $('option').not(function(){ return !this.selected }).
11,Zepto 不支持的选择器:
拓展:
Zepto 最大的优势是它的文件大小, 只有 8k 多, 是目前功能完备的库中最小的一个, 尽管不大, Zepto 所提供的工具足以满足开发程序的需要. 大多数在 jQuery 中. 常用的 API 和方法 Zepto 都有, Zepto 中还有一些 jQuery 中没有的. 另外, 因为 Zepto 的 API 大部分都能和 jQuery 兼容, 所以用起来极其容易, 如果熟悉 jQuery, 就能很容易掌握 Zepto. 你可用同样的方式重用 jQuery 中的很多方法, 也可以方面地把方法串在一起得到更简洁的代码, 甚至不用看它的文档.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17083.html