以下便是閱讀jQuery原始碼後挖掘的18條令人驚奇的資訊：
1. sizzle的大小
Sizzle是用來幫助jQuery實現DOM查詢操作的引擎，可能你不知道它佔用了jQuery原始碼的22%。
其次最大的特性是$.ajax，佔用了jQuery原始碼中的8%。
2. $.grep
這個方法類似underscore中的_.filter方法，使用兩個引數，一個陣列變數和一個回撥函式，返回通過回撥函式為true的元素。
3. 冒泡提醒
jQuery特意的阻止了一個事件型別的氣泡。這就是load事件，jQuery傳遞了一個特別的noBubble:true來阻止事件冒泡到window物件（這可能導致錯誤的匹配了window.load事件）
4. 預設的動畫速度
jQuery通過快速的變化元素樣式屬性來實現動畫。每一個變化被叫做一個"滴答"。預設的動畫速度是每13毫秒滴答一次，你可以通過重寫jQuery.fx.interval來修改預設的值
5. $.fn.addClass接受一個方法
我們通常提供$.fn.addClass一個class定義名稱。但是它同樣可以支援方法。你只需要方法返回一個空格分隔的字串class定義即可。這個方法甚至接受元素的索引為引數，這樣我們可以構建自己的只能class名。
6. $.fn.removeClass同樣支援
這個方法也可以支援接受方法為引數，和$.fn.addClass一樣。
7. :empty偽選擇器
這個偽選擇器可以匹配所有沒有子元素的元素
8. :lt和:gt偽選擇器
這些偽選擇器基於索引來匹配。例如，$('div:gt(2)')將會返回所有的div除了前３個元素（基於０索引）。如果你提供一個負值，那麼就從末尾算起。
9. $(document.ready()使用了promise
jQuery內部使用了jQuery的deferred來保證DOM完整被載入
10. $.type
大家可能都熟悉typeof來判斷資料型別，但是你是否知道jQuery提供了.type()方法？這個方法比瀏覽器本地版本更智慧。
例如，typeof(new Number(3))返回了“object”，然而$.type(new Number(3))放回數字。
更確切的說$.type告訴你返回物件的值型別
11. $.fn.queue
你可以使用$('div').queue()來檢查一個元素的特效佇列。這對於你想了解多少個特效還保持在物件元素很有好處。
更有用的在於，你可以直接操作佇列來新增自己的特效，如下：
$( document.body ).click(function() {
$( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 2000 )
.queue(function() {
$( this ).addClass( "newcolor" ).dequeue();
})
.animate({ left: "-=200" }, 500 )
.queue(function() {
$( this ).removeClass( "newcolor" ).dequeue();
})
.slideUp();
});
12. Click事件針對禁用元素將失效jQuery針對禁用的元素自動中斷點選事件，這樣可以有效優化保證讓你不用書寫更多程式碼來檢測這種情況
13. $.fn.on 接受多個物件
你是否知道$.fn.on方法接受物件來新增多個事件？下面是例子：
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
14. $.camelCase這個方法幫助你將破折號風格字串轉化為駝峰拼寫方式，如下：
background-color 轉化為 backgroundColor
15. $.active
呼叫$.active返回活動的XHR查詢數量。這個可以用來強制限制同時處理多少個ajax請求
16. $.fn.parentsUntil/$.fn.nextUntil/$.fn.prevUntil
我過去非常熟悉.parents()，.next()和.prev()方法，但是不知道其它版本。
他們匹配所有父層/下一個元素/上一個元素直到遇到了停止條件元素
17. $.fn.clone引數
這個方法帶的引數可以通過傳遞引數true來幫助你確認拷貝資料屬性和事件
18. 更多$.fn.clone引數
除了上面引數，你也可以通過傳遞另外一個引數true來克隆子元素的資料屬性和事件，這叫做深層次克隆。
第二引數預設使用第一個引數值。如果你第一個引數為true，那麼第二個引數也為true的話，就可以省略
以上就是閱讀jQuery原始碼的收穫，希望大家覺得有幫助，感謝閱讀，如果你有更多的心得，請和我們分享！
相關閱讀
評論(4)