本系列是針對jquery2.0.3版本進行的講解。此版本不支持IE8及以下版本。

?

(function(){

　　(21, 94) ? ?　　定義了一些變量和函數， ? jQuery = function(){};

　　(96,283) ? 　　給jQuery對象添加一些屬性和方法（實例方法，通過$("div")這類的jQuery實例對象來調用）

　　(285,347) ?　　extend : jQuery的繼承方法

　　(349,817) ?　　jQuery.extend():擴展一些工具方法（靜態方法，直接通過$來調用的，比如：$.trim）

　　(877,2856)　　Sizzle：復雜選擇器的實現。比如：$("ul li + p ");

　　(2880,3042)　　Callbacks:回調對象-》函數的統一管理。

　　(3043,3183)　　Deferred：延遲對象-》對異步的統一管理

　　(3184,3295)　　support:功能檢測

　　(3308,3652)　　data(): 數據緩存

　　(3653,3797)　　queue():隊列管理，dequeue.

　　(3803,4299)　　attr(),prop(),val(),addClass()，對元素屬性的操作

　　(4300,5128)　　on(),trigger() 事件操作的相關方法

　　(5140,6057)　　DOM操作：添加，刪除，獲取（next），包裝（wrap），Dom篩選

　　(6058,6620)　　css():樣式的操作?

　　(6621,7854)　　提交的數據和ajax的操作:load,ajax

　　(7855,8584)　　animate():運動的操作。 show,hide,fadeIn。

　　(8585,8792)　　offset(),位置和尺寸的一些方法

　　(8804,8821)　　jQuery支持模塊化的模式

　　(8826) ? ? ? ? ? ? window.jQuery = window.$ = jQuery;

})()

?

(function(window,undefined){ ? ?

　　//window局部化，1.查找速度快。2.利于代碼壓縮，可以把window壓縮成a。

　　//undefined，有些瀏覽器的undefined可以被修改，為了防止undefined被修改，所以傳了一個undefined給了jQuery

　　core_strundefined = typeof undefined; ? ?

　　　　//為了防止ie9以及以下版本，判定一個xmlNode方法為undefined時出問題。 ?

　　　　//比如：a.b== undefined(a為xmlNode,并且在IE9以下瀏覽器下，b不存在a中，出問題); ?typeof a.b== "undefined"(沒問題)

　　class2type = {}; ? ?

　　　　 //類型判斷,里面存的是{"[object String]":"string",....}。先去了解object.prototype.toString.call()

　　core_version = "2.0.3";

　　core_concat = [].concat; ? ?//緩存數組方法以及對象方法。利于壓縮。可以對core_concat壓縮。

　　......

　　var?rootjQuery,

　　_jQuery = window.jQuery, ? ? ? //以防在引入jQuery庫時，已經有其他庫引用jQuery和$標示符了。

　　_$ = window.$, ? ? ? ? //因此先把他們保存起來。（prototype.js就引用了$標識）

　　jQuery = function(selector, context){

　　　　return new jQuery.fn.init(selector,context,rootjQuery);

　　}

　　......

　　window.jQuery = window.$ = jQuery;

})(window) ?

這里我要詳細的講下new jQuery.fn.init(selector,context,rootjQuery);我看了太多別人寫的jQuery源碼解析，大多寫的不詳細，導致剛開始看的時候，沒看懂。

我們平常新建一個jQuery對象：$("div")，jQuery("div")，調用的就是new jQuery.fn.init(selector,context,rootjQuery);

很多人會有疑問，怎么new一個init，就是jQuery對象。除非init.prototype 就是jQuery.prototype。

大家可以在283行看到這樣一句話：jQuery.fn.init.prototype = jQuery.fn;96行看到這樣一句話：jQuery.fn = jQuery.prototype = {}

印證了上面的觀點。jQuery.fn.init.prototype 就是jQuery.prototype。

當你們去看init方法的時候，會發現它返回的是this，this指的就是new出來的jQuery對象，而大家都知道，當訪問一個實例對象的方法和屬性時，如果實例對象沒有，那么就去找原型對象，因此jQuery.prototype對象中的屬性和方法，都可以通過new 出來的jQuery實例對象訪問。也就是$("div")這種jQuery的實例對象可以調用各種在jQuery.prototype對象中的屬性和方法。

而對于這種靜態屬性和方法，$.trim,jQuery.trim，是在構造函數的屬性上定義的，跟實例對象沒有什么關系。舉個例子:function Person(){},Person.prototype={};

new Person()就是實例對象，它可以調用Person.prototype中的所有屬性和方法。而Person.trim = function(){}，就是靜態方法，只能通過構造函數Person.trim才能進行調用。

?

有一個知識點，-webkit-margin-left ? ->js訪問時，會轉化成webkitMarginLeft，而-ms-margin-left會轉換成MsMarginLeft。

?

加油！

轉載于:https://www.cnblogs.com/chaojidan/p/4127380.html

總結

以上是生活随笔為你收集整理的jquery源码解析：代码结构分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。