共同點
jQuery:
核心函數$
- 作為函數使用（參數）
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
舉例代碼塊：
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，前提是必須滿足下面四個條件，需要注意！！！！！
1、委託在同一個父元素,或者觸發的元素的事件範圍小於同類型事件(冒泡能冒到自身範圍)
2、同一個事件
3、委託關聯 操作的類要進行關聯
4、綁定順序---從當前的位置往後看
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標準事件來綁定事件。
