本文参考代码为jQuery 2.0.3
使用jQuery时,都是类似于$('XXX').xxx()的用法,那么先来找找$
在jQuery源码最后几行可以看到: (代码8826行)
window.jQuery = window.$ = jQuery;
在这步中将 $ 也就是 jQuery 挂载到了window对象上 , 所以可以在页面上直接使用$() , 接下来找找jQuery函数的定义
源码60行位置可以看到如下:(代码60行)
jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); },
在这里定义了一个叫jQuery的函数变量,在这里用new返回了一个实例对象,这样做就使得使用jQuery时不用new进行实例化了,只需要$()就创建了实例对象,
那么接着去看看这个init函数,由于jQuery中的init函数非常复杂,这里进行下简写,只考虑选择器为ID的情况(代码96行)
jQuery.fn = jQuery.prototype = { init: function( selector, context, rootjQuery ) { var elem,match; var rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/; match = rquickExpr.exec( selector ); elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } }
jQuery.fn在这充当jQuery.prototype别名的作用,在jQuery.prototype中的init函数返回了一个数组,里面放着指定ID的引用,到了这里就实现了 $('#ID')
jQuery.fn.init是构造函数的话原型方法就应该在jQuery.fn.init.prototype中,然而jQuery中分为静态方法和实例方法,所有实例方法放在了jQuery.fn中,这些实例方法也即是$('#'ID).xx()中那个xx,在jQuery源码init函数下方紧跟着就对原型进行了修改 (代码283行)
jQuery.fn.init.prototype = jQuery.fn;
到这里也就把jQuery的原型对象赋值给了init的原型,因此使用$()返回的对象就可以使用jQuery原型上的方法了。
更多jquery分析可以参考 http://nuysoft.iteye.com/blog/1190542