Zepto和jQuery的具体差别

共同点

jQuery:

核心函数$

1. 做为函数使用（参数）
   1.function
   2.html字符串
   3.DOM code
   4.选择器字符串
2. 做为对象调用(方法)
   $.ajax() $.get() $.post()
   $.isArray()
   $.each()
   $.isFunction()
   $.trim()
   ......

jQuery对象

概念：jQuery核心函数$()调用返回的对象就是jQuery对象的
   数组（可能有只有一个）；
   使用：
   1.addClass()
   2.removeClass()
   3.show()
   4.find()

### zepto:

以上jQuery的特性zepto一样适用

---

不一样点

属性操做attr和prop

举例代码块：

html

<select style="font-size: 25px;">
    <option value="name">科比</option>
    <option value="name">韦德</option>
    <option value="name" selected="selected">邓肯</option>
    <option value="name">吉诺比利</option>
    <option value="name" selected="selected">艾弗森</option>
</select>

script

$(function(){
    $('option').each(function (index, item){ 
         console.log($(this).attr('selected'));
         console.log($(this).prop('selected'));
    });
});

在jQuery中

第一个console的输出结果是undefined，undefined，selected，undefined，selected
第二个console的输出结果是4个false，1个true

- prop多用在标签的固有属性，布尔值属性。好比：a标签的href，class，selected等。

• attr多用在自定义属性上。
• 在jQuery中若是用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined。（例以下拉选项中的selected属性）

在zepto中

第一个console的输出结果是false，false，selected，false，selected
第二个console的输出结果是4个false，1个true

- 在zepto中用attr也能够获取布尔值属性.

• prop在读取属性的时候优先级高于attr，布尔值属性的读取仍是建议用prop
• 坑！------zepto中removeProp()的方法。在zepto1.2版本以上才支持。

DOM操做

script代码块以下

$(function () {
    var $insert = $('<p>我是新添加的p标签</p>', {
        id:'p1',
        class:'pp'
    });
    $('#box').append($insert)
});

在jQuery中

• 在插入DOM元素的时候，直接添加id,class等属性不会生效

在zepto中

• 在插入DOM元素的时候，直接添加id,class等属性能够生效

each方法（遍历）

script代码块

$(function(){
    var arr = [1,'a',3,'b',5];
    var obj = {name:'tom',age:13};
    $.each(arr, function(index,item) {
        console.log(index,item);
    });
    $.each(obj, function(key,value) {
        console.log(key,value);
    });
    var str = 'abcdef';
    $.each(str, function(index,item) {
        console.log(index , item);
    });
})

在jQuery中

• 能够遍历数组,以index，item的形式，
• 能够遍历对象，以key-value的形式
• 不能够遍历字符串。
• 不能够遍历json字符串

在zepto中

• 能够遍历数组,以index，tiem的形式，
• 能够遍历对象，以key-value的形式，
• 能够遍历字符串。

offset()的区别

script代码块

$(function(){
    var $offset = $('#box').offset();
    console.log($offset);
    console.log($offset.top);
    console.log($offset.height);
    console.log($offset.width);
})

在jQuery中

• 获取匹配元素在当前视口的相对偏移。
• 返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
• 获取width和height时输出的是undefined；

在zepto中

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

width(),height()

script代码块

$(function(){
    console.log($('#box').width());
    console.log($('#box').height());
    console.log($('#box').css('width'));
    console.log($('#box').innerHeight());
    console.log($('#box').outerHeight()+'outerHeight');
})

在jQuery中

• width(),height()---content内容区的宽高，没有单位px;
• .css('width')----获取写在样式表中的的宽高，通常指content（怪异盒子除外），有单位px;
• innerHeight(),innerWidth()---获取content+padding;
• outerHeight(),outerWidth()---获取content+padding+border;
• 以上对于不可见盒子仍然生效;

在zepto中

• width(),height()---content+padding+border的宽高，只对可见元素有效，没有单位px;
• 用.css('width')获取的是content的宽高。
• zepto中没有innerWidth()和outerWidth();

注：上述全部获取方法中，只有.css()获取的值不是number类型，计算时须要转换类型。

事件委托

事件委托是指将事件委托给相同的祖先元素，能够给动态建立的新节点同时绑定上事件.

### 在script中为#box的子元素.a绑定cilik事件

方法一

$('#box').delegate('.a','click',function(){
    alert('你点我干啥？');
})

方法二

$('#box').on("click",'.a',function(){
    alert('a事件');
});

注 用delegate绑定事件委托时，先写元素，再写事件；on与之相反
还有一种绑定方法live, 在js1.7以后的版本已经废除

在zepto中

zepto的官网表示已经废除了live，delegate等。
委托的事件先被依次放入数组队列里，而后由自身开始日后找直到找到最后，期间符合条件的元素委托的事件都会执行。
在zepto中事件委托有个BUG，前提是必须知足下面四个条件，须要注意！！！！！
一、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
二、同一个事件
三、委托关联  操做的类要进行关联
四、绑定顺序---从当前的位置日后看

touch event

jQuery

• on() 绑定事件处理程序
• off() 方法移除用目标oon绑定的事件处理程序。
• bind() 为每一个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也能够自定义事件。
• one() 为每个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
• unbind() 是bind的解绑操做，删除匹配元素所绑定的bind事件。

zepto

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

event

zepto

• zepto有本身的一套事件机制，而且对不一样的浏览器作了兼容的内部封装处理。
• 像新版本的zepto中已经舍弃了bind，delegate，die，一样jQuery中舍弃了live，die等。
• 如今统一使用on，off标准事件来绑定事件。

以上为我的学习笔记总结，若有不足之处，请指正