zepto的特点及与jQuery的比较

特点

1. 体积8kb
2. 针对移动端的框架
3. 语法同jquery大部分一样，都是$为核心函数
4. 目前功能完善的框架体积最小的左右

同jquery相似的语法

核心：$

–作为函数使用

参数

1. function(){}
2. 选择器字符串
   3.html标签字符串
3. DOM code

–作为对象使用

方法

1. $.each()
2. $.trim()
3. $.ajax() $.get() $.post()
4. $.isArray()

jquery对象/zepto对象

概念：$调用返回的就是 jquery对象/zepto对象 伪数组(有时候只有一个元素)

zepto同jquery不同的API

attr同prop

jquery：

1. 标签的固有属性，布尔值属性<prop>
2. 标签的自定义属性，用attr布尔值属性并且布尔值属性在标签体内没有定义时候<attr>
   zepto:attr同样获取布尔值属性。

DOM操作

配置对象：
jquery不同使用配置对象添加id，class
zepto可以使用配置对象。结构，样式分离，而且容易管理

offset()

----用来获取目标元素相对于视口的偏移量 对象
jquery：top ， left
zeptop：top，left，width，height(content,补白，border)

width(),height()

jquery:

1. width(),height() 获取content内容区的值，没有单位
2. .css 获取content内容区的值，有单位px
3. innerHeight() content,padding没有单位
   innerHeight() content,padding,border没有单位

zepto:

1. width(),height()获取的content，补白，border
2. 没有innerHeight()，innerHeight()
3. .css()

事件委托

原理：利用冒泡的原理将事件绑定到父元素/祖先元素身上，event.target指向的子元素
zepto：

1. 委托同一个父元素身上
2. 同一个事件
3. 操作关联，操作对应的元素/类
4. 顺序
5. 谁操作的关联类就是谁触发的

each

jquery：能遍历数组，对象，不能遍历字符串/json对象/json数组
zepto：能遍历数组，对象，字符串

隐藏元素的宽高

jquery：能获取
zepto： 不能宽，高

zepto的touch event

• tap点击事件
• singleTap()点击事件
• doubleTap()双击事件
• longTap()长按事件–连续作用750ms
• 滑动事件(浏览器的默认行为—翻页—touch-action)

【注意】：
1、swipe滑动事件：在同一个方向连续滑动30px才为滑动，否则就是点击
2、longTap长按事件：手指在目标对象上连续作用超过750ms算长按，否则算点击