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標準事件來綁定事件。

以上爲我的學習筆記總結，若有不足之處，請指正