Zepto的使用

一.Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库， 它与jquery 有着类似的api。
Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery。

jQuery和Zepto.js的区别
（1）jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；
（2）Zepto.js在移动端被运用的更加广泛；更注重在移动端的使用
（3）jQuery的底层是通过DOM来实现效果的，zepto.js 是用css3来实现的；
（4）Zepto.js可以说是阉割版本的jQuery。

Zepto和jQuery的差异

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

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 })。