想深入了解一下 jQuery 的源碼，但是覺得學習曲線有點陡峭，有沒什麼好的方法或者學習資源推薦？

01-06

網上找到的一些資料主要都講的很籠統，不夠系統。最近在看jQuery的Sizzle選擇器源碼，實在是看的有點暈~

Jquery Deconstructed 把 Jquery 源碼解構並可視化了，非常好的材料，而且也有其他庫如 Prototype，MooTools 的版本。不過字體看著不太舒服，可以自己改改。

http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/

Paul Irish，HTML5 Boilerplate 的作者，錄有兩個老幼咸宜的視頻，可以從這裡起步。

10 Things I Learned from the jQuery Source

http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

11 More Things I Learned from the jQuery Source

http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/

其他例如 http://james.padolsey.com/jquery/ 之類，沒用過，不了解。我覺得最好是把 Jqeury source 存一份到書籤欄上，時不時打開看一看：

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

這裡面很多所謂的「奇淫巧技」，以及很多經過錘鍊的集體智慧，是 JavaScript developer 必看的代碼之一。

推薦石川的Decoding jQuery系列（英語）：

http://www.blog.highub.com/decoding-jquery/

尤其是前四Part。

Part1，jQuery所有的數據（變數和方法）都保存在var jQuery這個變數里。

註：local jQuery用來防止jQuery被覆蓋，因為它包含在global jQuery內部，外部不可以，所以不能被覆蓋。

// global jQuery

var jQuery = (function() {
// local jQuery
var jQuery = function( selector, context ) {
// ...
}
})();

Part2，jQuery對象只是一個增強版的jQuery.fn.init。

Part3， jQuery function, object, jQuery.fn, prototype and init之間的關係：

var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor "enhanced"
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype = {
init: function( selector, context, rootjQuery ) {
//...
}
}
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

Part4，jQuery之所以可以鏈式執行的秘密：每個函數都return this。this指向jQuery對象自己。就像下面這樣：

var num = {
value: 1,
minus: function (n) {
this.value -= n;
return this;
},
plus: function (n) {
this.value += n;
return this;
},
getVal: function () {
console.log(this.value);
}
};

num.minus(2).plus(5).getVal();

jQuery其實很簡單

jQuery對象是一個以DOM為對象的特殊數組，並包含大量方法

簡單的可以認為是這樣的

function jQuery(){

var jquery=[dom1,dom2,dom3]

jquery.fn1=funtion(){.....}

jquery.fn2=function(){......}

return jquery;

}

推薦一本書，《jquery技術內幕》，作者高雲。

不過要研究jquery的源碼，確實離不開對js語言的理解。

==========================================

補充:

如何寫一個你自己的jQuery庫？

Lucifier129.github.io/build-your-own-jquery-library.md at master · Lucifier129/Lucifier129.github.io · GitHub

這篇博文在一個入門的層次上,為理解 Jquery 源碼提供了一些幫助

jQuery 解構 http://www.cn-cuckoo.com/deconstructed/jquery.html

// 2015年12月18日更新

這個網站的版本已經沒有了，英文版的鏈接在這裡

jQuery Deconstructed

作者 John Resig 之前寫過 Pro JavaScript Techniques[1]。書中介紹的內容可以看做對 jQuery 基本設計的解說。

[1] http://jspro.org/

jquery特效實用源碼：Jquery+CSS3動畫彈出表單提交效果、Jquery九宮格大轉盤抽獎、Jquery仿電子印章在線製作、Jquery巧克力色二級導航、Jquery旋轉木馬插件TikslusCarousel，還有另外的8款炫酷的HTML5特效源碼可以看下

網易雲學堂

逐行分析jQuery源碼的奧秘課程詳情

補充一個，還可以看 Zepto 的源碼，很不錯，很適合學習jQuery的選擇器。

http://zeptojs.com/

列印版的 jQuery 源碼

jQuery.2.0.3彩色源代碼列印紙質版[4種配色方案可選]-淘寶網

我就推薦一本書吧

《jQuery技術內幕:深入解析jQuery架構設計與實現原理》高雲【摘要書評試讀】圖書

如果你只需要應用的話，你可以直接使用jquery插件，如果你需要學習編程，jQuery其實不是很複雜，你如果不懂JS也可以編些，當然，懂一點兒更好了，基本概念應該先了解，推薦看看這個最新的在線教程。非常不錯，唯一不足的是，全英文。http://www.gbin1.com/technology/jquery/20120203learnjqueryin30days

JQUERY很好用

想揭破JQ，必須有一定的 Javascript 基礎，這是硬體設施，在調用每一個方法的時候，主動去思考方法的實現過程（還要注重兼容問題）

所以，原生 Javascript 的學習，應該才是你的學習方向

極客標籤課程庫中有許多jQuery代碼課程資源，http://www.gbtags.com/gb/gblibrary.htm

首先要是個JS高手吧，直接看JS項目，很吃力~

打算深入研究jQuery源碼的話，必須要有很紮實的JS語言基礎, JQuery源碼中有很多技巧和思路值得去研究的，我剛研究完Sizzle、Ajax模塊，抽時間把篩選、事件、屬性那幾個模塊看看！

Sizzle 部分可以跳過，不影響理解jQuery，而且隨著HTML5的推廣，原生的選擇器效率更高，jQuery的選擇器效率顯得低下了。所以可以直接學習簡化版的Zepto也可以學習，因為不用考慮對IE6-8的支持，結構更清楚更好理解。

現在這些講解都是基於1.44的，1.5後jquery團隊加入了牛人，jquery的ajax那部分改變了很多。本人也很想知道，有沒有基於1.5版本後的講解。謝謝

首先要確定你想看的是Sizzle還是jQuery，jQuery中引入了Sizzle，嚴格來說jQuery本體是選擇器外的功能實現，Sizzle我還真沒看過，如果是jQuery的話，《犀利開發:jQuery內核詳解與實踐》還不錯，講解核心代碼和基本原理的

謝謝題主，很有幫助

就個人經驗看多少遍只能懂皮毛可以參考jq 自己實現每個模塊

推薦你看一下這個

jQuery入門課程視頻教程

javascript高級程序設計這書好的很