Zepto知识点总结

Zepto知识点总结，入门小白建议一看！！！

什么是zepto

	zepto是轻量级的JavaScript库，专门为移动端定制的框架
	与jQuery有着类似的API，俗称：会jQuery就会用zepto

zepto的特点

	针对移动端
	轻量级，压缩版本只有8kb左右
	响应，执行块
	语法，API大部分同jQuery一样，学习难度低，上手快
	目前API完善的框架中体积最小的一个

zepto与jQuery

*相同点：都是优秀的js函数库 语法，API大部分都一样（zepto是按照jQuery的思路来设计的）zepto相当于jQuery的子集 同jQuery一样都是以$为核心的函数

zepto与jQuery不同点：
1.attr与prop的区别：
jQuery中：prop多用在标签的固有属性，布尔值属性，比如：a标签的href，class，selected，checked等
attr多用在自定义属性上
jQuery中用attr获取布尔值属性且布尔值属性在标签体内没有定义的时候会得到undefined
zepto中：在zepto中用attr也可以获取布尔值属性
prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议永prop
注意 ！！！zepto中removeProp（）的方法，在1.2+版本才支持
2.DOM操作：
jQuery：jQuery中插入DOM元素的时候添加配置对象（比如：id，class）不起作用
zepto：插入DOM元素的时候添加配置对象（id，class）的时候可以添加进去，并且会直接显示在标签属性内，可以操作，影响DOM元素
3.each方法
jQuery：$.each(collection,function(index,item){…})
可以遍历数组，以index，item的形式
可以遍历对象，以key-value的形式
不可以遍历字符串
zepto: $.each(collection,function(index,item){…})
可以遍历数组，以index，item的形式
可以遍历对象，以key-value的形式
可以遍历字符串
遍历json对象以字符串的形式遍历
4.offset（）的区别
jQuery：offset（）
获取匹配元素在当前视口的相对偏移
返回的对象包含两个整形属性：top和left，此方法只对可见元素有效
zepto：offset（）
获得当前元素相对于视口的位置
返回一个对象含有：top，left，width和height（获取到的width，height都是包含padding和border的值）
5.width（）和height（）区别
jQuery：width（），height（）----content内容区的宽高，没有单位
.css（‘width（）’）----可以获取content内容区的宽高，padding、border的值，没有单位
innerHeight（），innerWidth（）----outerHeight（），outerWidth（）来获取
zepto：width（），height（）是根据盒模型来取值的，包含补白和border的值，且不带单位
没有innerHeight（），innerWidth（）----outerHeight（），outerWidth（）
通过.css（）获取padding，border的值
6.隐藏元素宽高
jQuery：jQuery可以获取隐藏元素的宽高
zepto：zepto无法获取隐藏元素的宽高

重排：重新排序页面结构等
重绘：重新绘制背景颜色等
7.事件委托：将子元素的事件委托在父元素上，但执行事件的是子元素
jQuery： live（） 在1.7以上已经废除了 delegate（）
zepto：在zepto的官网表示已经要废除了live delegate
！！！！值得注意的是在zepto中的事件委托
委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的时间都会执行
委托在同一个父元素，或者触发的元素的事件范围小于同类型事件（冒泡能冒到自身范围）
同一个事件
委托关联 操作的类要进行关联
绑定顺序——从当前的位置往后看

-touch Event
jquery: on() 绑定事件处理程序
off（） 方法移除用目标元素on绑定的事件处理程序
bind（） 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件
one（）为每一个匹配元素的特定事件（行click）绑定一个一次性的事件处理函数，只执行一次
trigger（） 处罚由bind定义的事件（通常会自定义）
unbind（） bind的方向操作，删除匹配元素所绑定的bind事件
zepto：touch方法
tap（） 点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
singleTap（） 单点击事件
doubleTap（） 双点击事件
longTap（） 当一个元素被按住超过750ms（时间可通过touch.js文件自定义）触发
swipe ，swipeLeft ，swipeRight ，swipeUp ，swipeDown -当元素被划过（同一个方向大于30px）是触发，（可选择给定的方向）
在一个方向滑动大于30px即为滑动，否则算点击
Event
事件处理机制：zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理
像新版本的zepto中已经舍弃了bind，delegate，die ，同样jQuery中舍弃了live等
现在统一使用on，，off标准事件来绑定事件

-form
serialize()
在ajax post请求中将用作提交的表单元素的值编译成 url-encoded字符串，—key(name)/value
不能使用的表单元素，buttons，未选中的radio，buttons/checkbox 将会被跳过
serializeArray()
将用作提交的表单元素的值编译成拥有name和value对象的数组
不能使用的表单元素：buttons ，未选中的radio buttons/checkboxs 将会被跳过
submit（）
为 ‘submit’事件绑定一个处理函数，或者触发元素上的‘submit’事件
当参数function没有给出时，触发当前表单‘submit’事件，并且执行默认的提交表单行为，除非组织默认行为

如何取消一个ajax请求------abort（）方法—取消当前请求
场景：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
然后因为网速好或者其他原因，两次请求同时返回，该怎么办
需求用户可以再次点击的时候取消之前的请求
disabled 禁止用户点击 操作按钮，表单项的时候只是针对click事件，并没有对touch事件作出处理
另外，，多敲代码，多看代码是必不可少的！！1