Zepto与jQuery API的异同

*什么是zepto.js
概念： 移动端开发框架,是jquery的轻量级代替品；API及语句同jquery相似，但文件更小(可压缩至8KB)。
是目前功能完备的库中，最小的一个。
* zepto.js特点
1、针对的是移动端
2、轻量级，压缩版本只有8KB
3、语法大部分同jquery一样，学习成本低，上手快。
4、响应，执行快。
5、同jquery一样以$作为核心函数和核心对象。

一、Zepto与jQuery相同的API

核心函数$

1、作为函数使用（参数）

1. function
2. html字符串
3. DOM code
4. 选择器字符串

2、作为对象调用(方法)

1. $.ajax() $.get() $.post()
2. $.isArray()
   $.each()
   $.isFunction()
   $.trim()
   …

3、jquery对象

概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）；
使用：

1. addClass()
2. removeClass()
3. show()
4. find()

zepto：以上jquery的特性zepto同样适用

二、Zepto与jQuery不同的API

1、attr和prop

jQuery：attr与prop的区别

1. prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected等。
2. attr多用在自定义属性上。
3. 在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined

Zepto：

1. 在zepto中用attr也可以获取布尔值属性.
2. prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop
3. 坑！------zepto中removeProp()的方法。在1.2及以上才支持。

2、DOM操作

jQuery：

jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候不会显示；

Zepto：

插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。

3、each方法

jQuery：

$.each(collection, function(index, item){ … })

1. 可以遍历数组,以index，item的形式，
2. 可以遍历对象，以key-value的形式
3. 不可以遍历字符串
4. 不可以遍历json字符串

Zepto：

$.each(collection, function(index, item){ … })

1. 可以遍历数组,以index，tiem的形式
2. 可以遍历对象，以key-value的形式
3. 可以遍历字符串。

4、offset()的区别

jQuery：

1. 获取匹配元素在当前视口的相对偏移。
2. 返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

Zepto：

1. 获得当前元素相对于视口的位置。
2. 返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)

5、width(),height()区别

jQuery：

1. width(),height()—content内容区的宽高，没有单位px;
2. .css(‘width’)----可以获取content内容区的宽高，padding，border的值，有单位px;
3. innerHeight(),innerWidth()—outerHeight(),outerWidth()来获取

Zepto：

1. zepto用width(),height()是根据盒模型决定的，并且不包含单位PX
2. zepto中没有innerHeight(),innerWidth()—outerHeight(),outerWidth()
3. 用.css(‘width’)获取的是content的宽高。

6、事件委托

jQuery：

在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。

Zepto：

在zepto的官网表示已经废除了live，delegate等。

委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。

1. 委托在同一个父元素，或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2. 同一个事件
3. 委托关联 操作的类要进行关联
4. 绑定顺序—从当前的位置往后看

7、隐藏元素宽高

jQuery：

jquery可以获取隐藏元素的宽高

Zepto：

zepto无法获取隐藏元素宽高

8、touch Event

jQuery：

1. on() 绑定事件处理程序
2. off() 方法移除用目标oon绑定的事件处理程序。
3. bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
4. one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
5. trigger() 触发有bind定义的事件（通常是自定义事件）
6. unbind() bind的反向操作，删除匹配元素所绑定的bind事件。

Zepto：

1. tap()点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
2. singleTap() 点击事件
3. doubleTap() 双击事件
4. longTap() 当一个元素被按住超过750ms触发。
5. swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)在一个方向滑动大于30px即为滑动。否则算点击。

zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理。

1. 像新版本的zepto中已经舍弃了bind，delegate，die，同样jquery中舍弃了live，die等。
2. 现在统一使用on，off标准事件来绑定事件。