zepto知识点总结

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

* 共同点：
    jquery:
    * 核心函数$
    1、作为函数使用（参数）
       1.function
       2.html字符串
       3.DOM code
       4.选择器字符串
    * 作为对象调用(方法) 
            $.ajax()  $.get() $.post()
            $.isArray()
            $.each()
            $.isFunction()
            $.trim()
              ......
     * jquery对象
           概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）；
               使用：
                    1.addClass()
                    2.removeClass()
                    3.show()
                    4.find()
              zepto:

           以上jquery的特性zepto同样适用

* 不同点：
//attr与prop的区别
jquery
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以上才支持。

//dom操作
jquery
jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候不会显示；
zepto
插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。

//each方法
jquery
1.$.each(collection, function(index, item){ ... })
2.可以遍历数组,以index，item的形式，
3.可以遍历对象，以key-value的形式
4.不可以遍历字符串。
5.不可以遍历json字符串
zepto
1.$.each(collection, function(index, item){ ... })
2.可以遍历数组,以index，tiem的形式，
3.可以遍历对象，以key-value的形式，
4.可以遍历字符串。
5.可以遍历json字符串

//offset()
jquery
1、获取匹配元素在当前视口的相对偏移。
2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
zepto
* offset()
1、获得当前元素相对于视口的位置。
2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高(包括边框和padding)),此方法只对可见元素有效

//width(),height()
jquery获取宽高的方法
1、width(),height()---content内容区的宽高，没有单位px;
2、.css('width')----可以获取content内容区的宽高，没有padding，border的值，有单位px;
3、innerHeight(),innerWidth()获取padding---outerHeight(),outerWidth()来获取获取padding和border的值
zepto
1、zepto用width(),height()是根据盒模型决定的，并且不包含单位PX
2、包含padding的值,border的值
3、zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()


//事件委托：冒泡的原理将子元素的事件绑定在父元素身上，最终触发这个事件的是子元素event.target
jquery
on（事件名称，子元素选择器，回调函数）
在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
回调函数：是你定义的，不是你调用的，最后函数执行了。定时器是window调用的，所以this指向window
zepto
委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件
3、委托关联  操作的类要进行关联
4、绑定顺序---从当前的位置往后看

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

* zepto touch方法
* tap()点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
* singleTap()  单击事件
* doubleTap()  双击事件
* longTap()    当一个元素被按住超过750ms触发。
* swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过(同一个方向滑动距离大于30px)时触发。      (可选择给定的方向)*{    touch-action: none;}阻止默认的翻页行为
在一个方向滑动大于30px即为滑动。否则算点击。

1、serialize()
    * 在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。---key(name)/value
2、serializeArray()
    * 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
    * 不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
3、submit()
    * 为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。

    * 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。

* 如何废除一个ajax请求 ----abort()方法