欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery与zepto的区别

程序员文章站 2022-07-14 11:01:13
...

jQuery与zepto的区别

1、针对移动端程序 ,Zepto有一些基本的触摸事件可以用来做触摸屏交互( tap事件、swipe事件,Zepto是不支持IE浏览器。

2、 DOM操作的区别:添加id时jQuery不会生效,而Zepto会生效;

示例

(function($) {
	$ (function(){
	  var Sinsert = $('<p>jQuery 插入</p>', {
	  		id: 'iquery'
	  		}) ;
	  		$insert. appendTo($ ('body')) ;
	  		});
	  		}) (window. jQuery) ;
	  Zepto (function($) {
	  		var sinsert = $('<p>Zepto插入</p>', (
	  		id: ' zepto'
	  		});
	  		$insert. appendTo($ ('body')) ;
}) ;

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

4、事件委托的区别: zepto中,选择器上所有的委托事件都依次放入到一个队列中,而在jquery中则委托成独立的多个事件。

5、width()和 height()的区别:
a) Zepto 由盒模型(box-sizing)决定,用.width()返回赋值的width,用.css(‘width’)返回加border等的结果。
b) jQuery 会忽略盒模型,始终返回内容区域的宽/高(不包含padding、border)。

6、offset()的区别 : Zepto返回{top,left,width,height} ;jQuery返回{top,left}。

7、Zepto 无法获取隐藏元素宽高,而jQuery可以。

8、Zepto 在操作dom的selected和checked属性时尽量使用prop方法,在读取属性值的情况下优先于attr。

9、Zepto 相对于jQuery来说是有许多选择不支持的,比如:

(1)基本伪类选择器: first、 :even 、:odd 、:eq(index) 、:gt(index)、:last、:It(index)、 :header 等。

(2)内容伪类: :contains(text)、:empty、:has(selector)、 :parent 等。

(3)可见性伪类: :hidden、:visible 等。

(4)属性选择器: [attribute!=value] 等。

(5)表单伪类: :input、 :text、 :password、 :radio、 :checkbox、:submit、:image、 :reset、 :button、 :file、 :hidden 等。

(6)表单对象属性: :selected 等。