要学习一个库首先的理清它整体架构：
1、jQuery源码大致架构如下：(基于 jQuery 1.11 版本，共计8829行源码)
(21,94) 定义了一些变量和函数jQuery=function(){}
(96,280) 给jQuery添加一些方法和属性，jQuery.fn=jQuery.prototype
(285,347) extend: jQuery的一些继承方法 更容易进行后续的扩展
(349,817) jQuery.extend()： 扩展一些工具方法
(877,2856) Sizzle:复杂选择器的实现
(2880,3042) Callbacks:回调对象——》对函数的统一管理
(3043,3183) Deferred:延迟对象——》对异步的统一管理
(3184,3295) support:功能检测
(3308,3652) data():数据缓存
(3653,3797) queue():队列管理
(3083,4299) attr(),prop() val() addClass()：属性操作
(4300,5128) on() trigger():事件的相关方法
(5140,6057) DOM操作：添加 删除 获取 包装 筛选
(6058,6620) css()：针对样式的操作
(6621,7854) 提交的数据和Ajax()的操作:ajax() load() getJSON()
(7855,8584) animate()：运动的方法
(8585,8792) offset:位置与尺寸的方法
(8826) 对外提供jQuery对象接口：window.jQuery=window.$=jQuery;
贴出一位大牛司徒正美对jquery的剖析：（最近也在读他框架设计一书，深深折服，这里推荐下）
jQuery强在它专注于DOM操作的思路一开始就是对的，以后就是不断在兼容性，性能上进行改进。
- ajax 数据交互
- attributes 属性操作，共分className, 表单元素的value值，属性与特征四大块。
- callbacks 函数列队
- core 种子模块，命名空间，链式结构，domReady，多库共存。
- css 样式操作，引入DE大神的两个伟大的hacks，基本上解决精确获取样式的问题。
- data 数据存取。
- deferred 异步列队（三合一版的函数列队）
- dimensions 元素尺寸的设置读取（来自社区）。
- effects 动画引擎
- event 事件系统（基于DE大神的事件系统与社区的两个插件）
- exports AMD系统(被RequireJS作者说服加几行代码支持其东东)
- manipulation 节点的操作
- offset 元素offsetTop(Left)的设置读取
- queue 列队模块（deferred与data的合体）。
- sizzle 从右到左进行解析的选择器引擎。
- support 特征侦测
- traversing 元素遍历。
2、使用jQuery时，我们经常会在原生DOM对象和jQuery对象之间产生困扰，为什么DOM对象没有这个方法，jQuery实例对象可以轻松实现某些功能。接下来看看jQuery实例对象是怎么创建。
(function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = { constructor: jQuery,
} init = jQuery.fn.init = function( selector, context, rootjQuery ) { // selector有以下7种分支情况： // DOM元素 // body（优化） // 字符串：HTML标签、HTML字符串、#id、选择器表达式 // 函数（作为ready回调函数） // 最后返回伪数组 } init.prototype = jQuery.fn;// 合并内容到第一个参数中，后续大部分功能都通过该函数扩展 // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数 jQuery.extend = jQuery.fn.extend = function() {}; // 在jQuery上扩展静态方法 jQuery.extend({ // ready bindReady // isPlainObject isEmptyObject // parseJSON parseXML // globalEval // each makeArray inArray merge grep map // proxy // access // uaMatch // sub // browser }); // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展 return jQuery; })(); window.jQuery = window.$ = jQuery; })(window);
从这段代码可以看出：
(1)、 jQuery对象不是通过 new jQuery 创建的，而是通过 new jQuery.fn.init 创建的。
(2)、jQuery对象就是jQuery.fn.init对象（ new jQuery.fn.init( selector, context, rootjQuery );）
(3)、 jQuery.fn指向了jquery的原型（实际上是用属性名fn代替prototype，为后面编程使用方便，要不然多次使用prototype会很绕）：
jquery 原型定义了jquery对象初始化init的一系列方法。
(4)、接下来，定义在jQuery.fn.init，后面又加上这句init.prototype = jQuery.fn ：即jQuery.fn.init的原型也指向了jQuery的原型，有点绕哈，合并下：
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype，实例说明一下，
这说明了我们使用new jQuery.fn.init()创建的实例对象的原型就是jQuery的原型，这样你就可以在jquery实例对象就可以直接调用jQuery这个类原型上挂载的方法了。
(5)、检验一个库的好坏是看这个库的扩展性和兼容性。jQuery.extend = jQuery.fn.extend = function() {}是jQuery对外提供扩展的方法
jQuery之所以如此强大，就是它能很容易实现类方法（虽然javascript没有类的概念，但这里还是用类来理解下，希望不要误解到读者）和实例方法扩展。
下面分析下jQuery实例对象这么创建的。
init = jQuery.fn.init = function( selector, context ) { var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } // Match html or make sure no context is specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { context = context instanceof jQuery ? context[0] : context; // scripts is true for back-compat // Intentionally let the error be thrown if parseHTML is not present jQuery.merge( this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ) ); // HANDLE: $(html, props) if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { for ( match in context ) { // Properties of context are called as methods if possible if ( jQuery.isFunction( this[ match ] ) ) { this[ match ]( context[ match ] ); // ...and otherwise set as attributes } else { this.attr( match, context[ match ] ); } } } return this; // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 if ( elem && elem.parentNode ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); } // HANDLE: $(DOMElement) } else if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); } if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); };
分析上面代码：
1、jQuery.fn.init的功能是对传进来的selector参数进行分析，进行各种不同的处理，然后创建jQuery实例对象。
2、arguments：选择器和使用的上下文环境（比较生涩：举个例子，比如在地图上找深圳这个地方，选择器好比深圳这个地名，熟悉的人可能一下子用经纬度定位了,东经113°46'～114°37'，北纬22°27'～22°52'（参数context都不用传了^^），对歪国仁来说，可能第一眼的先定位到我们的公鸡版图：也就是context：china，这样搜索速度就加快了。对国人（闭眼也能找着祖国哈^^）来说直接找广东—靠海—靠香港：也就是context：广东）。
3、接下来看看怎么分析selector参数类型以及相应的做了什么处理。
问题来了，看到这个正则这么长有没有要晕，要吐的感觉，
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,这里写的什么。呃这个暂时不解释，后面专门奉上一个正则表达专题供大家解读…………。
(1) $(""), $(null), $(undefined), $(false)；这几种情况直接返回 this,这里this是什么呢？ 注意不是JQuery本身，而是jQuery.fn.init
(2)、字符串类型
a:HTML标签形式的——$(<>)：通过document.createElement 创建节点。类似 $("<div></div>")、$("<div>aaa</div><div>aaa</div>") 两种情况；
而其他情况如：$(“</div>111”)、$("#id")、$(".class")、$("div")、$("#id .class div")，其中requickExpr匹配的是$(“</div>111”)、$("#id")。如果传入的是$(“</div>111”)，则match=["</div>111","</div>",null]；如果传入的是$("#id")，则match=["#id",null,“id”]。
b:HTML字符串——$(html) -> $(array)：创建DOM并扩充到jQuery对象
c:#id——$(#id)：直接通过document.getElementById获取dom节点。
d:选择器表达式——$(expr, $(...)):
(3)、DOMElement：直接返回将该对象，只是修改了context属性和length属性。
(4)、function：用过jquery基本上都会初始化代码写到 $(function(){……})里，就是DOMLoaded 加载完毕之后回调执行改匿名函数。
(5)、slector.slector = undefined 这个眼戳暂时没看懂，有谁看懂提下谢谢 。
上面涉及到的函数这里先提前脑补一下：$.parseHTML 、$.merge、$.isPlainObject(
$.parseHTML ：将字符串转换为存储DOM节点的数组 。第一个参数为传入的字符串，第二个为指定的根节点，第三个是boolean值 （“<script></script>”是否可以转化为<script>标签），默认为false，不转换。
$.merge：合并两个数组，在jQuery内部不仅可以合并数组，也可以合并类数组。
$.isPlainObject()：判断传入的参数是否是由 {}或new Object 创建的对象。
3、下面看看jQuery原型挂载了什么？
jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version, constructor: jQuery, selector: "", length: 0, toArray: function() { return slice.call( this ); }, get: function( num ) { return num != null ? ( num < 0 ? this[ num + this.length ] : this[ num ] ) : slice.call( this ); }, pushStack: function( elems ) { var ret = jQuery.merge( this.constructor(), elems ); ret.prevObject = this; ret.context = this.context; return ret; }, each: function( callback, args ) { return jQuery.each( this, callback, args ); }, map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, slice: function() { return this.pushStack( slice.apply( this, arguments ) ); }, first: function() { return this.eq( 0 ); }, last: function() { return this.eq( -1 ); }, eq: function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); }, end: function() { return this.prevObject || this.constructor(null); }, push: push, sort: deletedIds.sort, splice: deletedIds.splice };
1、先来看这三个属性：push、sort、splice 都是数组 Array()原型上挂载的方法。仅供jQuery内部使用（私有方法），与jQuery外部工具方法（对外可使用）不同
2、first、last、eq这几个方法都是都是又来获取数组某个元素的。
3、重点来了：pushStack在jQuery中使用频率特别高，它是干嘛的？只看这段代码。只能知道 它调用了 jQuery.merge，合并了类数组。
jQuery.extend = jQuery.fn.extend = function() { var src, copyIsArray, copy, name, options, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; if ( typeof target === "boolean" ) { deep = target; target = arguments[ i ] || {}; i++; } if ( typeof target !== "object" && !jQuery.isFunction(target) ) { target = {}; } if ( i === length ) { target = this; i--; } for ( ; i < length; i++ ) { if ( (options = arguments[ i ]) != null ) { for ( name in options ) { src = target[ name ]; copy = options[ name ]; if ( target === copy ) { continue; } if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } target[ name ] = jQuery.extend( deep, clone, copy ); } else if ( copy !== undefined ) { target[ name ] = copy; } } } } return target; };
1、功能：jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。jQuery.fn.extend(object);给jQuery实例对象添加方法。
2、结合$.extend使用方法来分析：
从arguments可以看出，extend是为了合并两个或更多对象的属性到第一个对象中。
3、再来分析代码：
看第一个逻辑意思是：如果第一个参数是布尔型的话，要实现扩展的对象target就是第二个参数，接下来再判断此时target是否对象或函数，都不是则默认扩展到{}。
接下来两个for循环，第一个循环遍历后续所有对象，第二个循环 实现将每个对象属性的copy到第一个对象。看似很简单，问题来了，target的属性与需要copy对象属性一样时，怎么处理？是直接覆盖/重写，还是合并？这就涉及到了浅拷贝与深拷贝，那浅拷贝与深拷贝又是什么。
(1)、js对象浅拷贝简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。也就是说遇到同名属性时直接覆盖/重写。
(2)、因为对象相对较为复杂，所以我们先来看对数组的深拷贝的问题
来看个例子，说明一下
extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
result={name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}} ////浅拷贝，对copy对象同名属性值类型为数组或对象的属性进行合并
也就是说它会将src中的嵌套子对象也进行合并，
而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
那么合并后的结果就是:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}//浅拷贝，对copy对象同名属性值类型为数组或对象的属性直接覆盖/重写。
来看下深拷贝和前拷贝怎么实现的：
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) { if ( copyIsArray ) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src : []; } else { clone = src && jQuery.isPlainObject(src) ? src : {}; } target[ name ] = jQuery.extend( deep, clone, copy ); } else if ( copy !== undefined ) { target[ name ] = copy; }
(1)、浅拷贝：target[ name ] = copy;直接覆盖和容易理解。
(2)、深拷贝稍显复杂，首先判断是数组还是对象，在对嵌套子对象递归调用$.extend方法。
4、jQuery多库共存处理
$符号已经被很多库作为作为命名空间，因此不免会与别的库框架或者插件相冲突。
jQuery引入noConflict函数可以将变量$的控制权让给第一个实现它的那个库，确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。下面来看看代码如何处理的？
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,//外部库重写了jQuery，先缓存
// Map over the $ in case of overwrite
_$ = window.$;//外部库重写了$，先缓存起来
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {//把全局$的控制权交出去，此处，jQuery为局部变量
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {//把全局jQuery的控制权也交出去，此处局部jQuery与全局jQuery做对比
window.jQuery = _jQuery;
}
return jQuery;
};
如果我们需要同时使用jQuery和其他JavaScript库，我们可以使用 $.noConflict()把$的控制权交给其他库。旧引用的$ 被保存在jQuery的初始化; noConflict() 简单的恢复它们。
通过类似swap交换的概念，先把之前的存在的命名空间给缓存起来_$,_jQuery，通过对比当前的命名空间达到交换的目的，首先，我们先判断下当前的的$空间是不是被jQuery接管了，如果是则让出控制权给之前的_$引用的库，如果传入deep为true的话等于是把jQuery的控制权也让出去了
那么具体何时调用才不会引起库命名空间冲突问题呢：这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。