jQuery和Zepto的区别？各自的使用场景？_Web前端

4条回答

2楼 · 2020-09-03 09:06

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会生效。

3、事件触发的区别：使用 jQuery 时 load 事件的处理函数不会执行；使用 Zepto 时 load 事件的处理函数会执行。

4、事件委托的区别：

在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不支持的选择器：

kitidog2016

3楼 · 2020-09-03 09:10

1. Zepto 对象不能自定义事件

例如执行： $({}).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']")

2-1.zepto的选择器没有办法选出 $("div[name!='abc']") 的元素

2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性

应该使用$('option').not(function(){ return !this.selected })
比如：jq:$this.find('option[selected]').attr('data-v') * 1
zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1
但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性

参考网址：https://github.com/madrobby/zepto/issues/503

2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法，以下是官方说明：

3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()

Zepto.js: 由盒模型（ box-sizing ）决定
jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。

3-1.边框三角形宽高的获取

假设用下面的 HTML 和 CSS 画了一个小三角形：

<div class="caret">div>

.caret {

width: 0;

height: 0;

border-width: 0 20px 20px;

border-color: transparent transparent blue;

border-style: none dotted solid;

}

　　jQuery 使用 .width() 和 .css('width') 都返回，高度也一样；

Zepto 使用 .width() 返回，使用 .css('width') 返回 0px 。
所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。

3-2.offset()

Zepto.js: 返回 top 、 left 、 width 、 height
jQuery: 返回 width 、 height

3-3.隐藏元素

Zepto.js: 无法获取宽高；
jQuery: 可以获取。

4.Zepto 的each 方法只能遍历数组，不能遍历JSON对象

5.Zepto 的animate 方法参数说明：

$("#some_element").animate({

opacity: 0.25, left: '50px',

color: '#abcdef',

rotateZ: '45deg', translate3d: '0,10px,0'

}, 500, 'ease-out')<pre name="code" class="html">

$this_bd.animate({height:iTthis_bd_h+'px',complete:siblingsUp()},700);

function siblingsUp(){

$this_bd.siblings('.bd').animate({height:'0px'},50);

};

我的网名不再改

4楼 · 2020-09-04 11:50

应用场景不同，因为jQuery的强大导致了他本身也强大，所以使他不太适合移动端的开发，Zepto就解决了这个问题，在Zepto里面封装了jQuery的一些基本功能，其他功能都拆分开来，做到让开发者在需要的时候手动引入，有点模块化开发的意味，按需引入，所以他本身轻巧的，更适合移动端。

虽然Zepto和jQuery的API十分相似，但是在细微上还是有区别的，我觉得会出现的坑如下：

1、Zepto的each方法只能遍历数组，不能遍历JSON对象

2、offset()的区别：

Zepto返回{top,left,width,height};

jQuery返回{width,height};

3、Zepto无法获取隐藏元素宽高，jQuery可以

4、事件委托的区别

在Zepto中，当a被点击后，一次弹出了“a事件”和“b事件”，说明虽然事件委托在.a上，可是同时也触发了.b上的委托。但是在jQuery中只会触发.a上面的委托弹出“a事件”。说明Zepto中的事件是一个一个触发的，也就是同步的，会出现事件b等着事件a完后才去触发的情况，而jQuery则是同时去触发，a触发的同时b也触发，这个时候还没有b这个对象，所以b的事件不会被触发。

var $doc = $(document);

$doc.on('click','.a',function(){

alert('a事件');

$(this).removeClass('a').addClass('b');

});

$doc.on('click','.b',function(){

alert('b事件');

});

Sauvignon

5楼 · 2020-09-22 19:04

jQuery 主要目标是PC的网页中，兼容全部主流浏览器。在移动设备方面，单独推出 `jQuery Mobile
Zepto从一开始就定位移动设备，相对更轻量级。它的API 基本兼容jQuery`，但对PC浏览器兼容不理想