从大四下学期开始了解jquery源码相关的东西，在回校参加毕业典礼（准确的说是参加补考挂科太多）期间便开始借着《jQuery》内幕学习jquery源码，然后在博客园写笔记也已经两个月了，也写了十几篇笔记了但是感觉自己还是懂了jquery的九牛一毛，作为一名初学者而言，希望通过jquery来增加自己js的能力，但是真正做起来确实难的，本身jquery写的很深奥，再加上平常工作也很忙，中间又辞职找工作找房子住等等就导致学习断断续续的，其实我写的时候很出东西自己也是很困惑的一直希望有人给指点迷津但是似乎大家没太多热情在jqeury源码上面，作为一个前端开发人员要学习的东西太多了可能大家不想把时间浪费在它上面吧。哈哈，有点跑题了，下面开始正题：
大致就是这么多还有ready方法是属于dom加载模块的放到后面，现在回过头看看其实东西也不是很多嘛，现在再把这个模块的源码贴出来对比着看一下
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
} // Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
} // The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
} // Handle HTML strings
if ( typeof selector === "string" ) {
// Are we dealing with HTML string or an ID?
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 = quickExpr.exec( selector );
} // Verify a match, and that no context was specified for #id
if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
doc = ( context ? context.ownerDocument || context : document ); // If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector ); if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true ); } else {
selector = [ doc.createElement( ret[1] ) ];
} } else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
} return jQuery.merge( this, selector ); // 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: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
} if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
} return jQuery.makeArray( selector, this );
}, // Start with an empty selector
selector: "", // The current version of jQuery being used
jquery: "1.7.1", // The default length of a jQuery object is 0
length: 0, // The number of elements contained in the matched element set
size: function() {
return this.length;
}, toArray: function() {
return slice.call( this, 0 );
}, // Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
get: function( num ) {
return num == null ? // Return a 'clean' array
this.toArray() : // Return just the object
( num < 0 ? this[ this.length + num ] : this[ num ] );
}, // Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
// Build a new jQuery matched element set
var ret = this.constructor(); if ( jQuery.isArray( elems ) ) {
push.apply( ret, elems ); } else {
jQuery.merge( ret, elems );
} // Add the old object onto the stack (as a reference)
ret.prevObject = this; ret.context = this.context; if ( name === "find" ) {
ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
} else if ( name ) {
ret.selector = this.selector + "." + name + "(" + selector + ")";
} // Return the newly-formed element set
return ret;
}, // Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}, ready: function( fn ) {
// Attach the listeners
jQuery.bindReady(); // Add the callback
readyList.add( fn ); return this;
}, eq: function( i ) {
i = +i;
return i === -1 ?
this.slice( i ) :
this.slice( i, i + 1 );
}, first: function() {
return this.eq( 0 );
}, last: function() {
return this.eq( -1 );
}, slice: function() { return this.pushStack( slice.apply( this, arguments ),
"slice", slice.call(arguments).join(",") );
}, map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
}, end: function() {
return this.prevObject || this.constructor(null);
}, // For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: [].sort,
splice: [].splice
};
其中最后三个方法没有说因他们本来就是Array对象的原型方法
// Save a reference to some core methods
toString = Object.prototype.toString,
hasOwn = Object.prototype.hasOwnProperty,
push = Array.prototype.push,
slice = Array.prototype.slice,
trim = String.prototype.trim,
indexOf = Array.prototype.indexOf,
昨天刚回到北京，因为要回去拿自己的毕业证，拿到了证书也就意味着大学生涯乃至学生生涯的结束，心里五味杂陈，从开始接触网页到大三决定做一名web开发人员种种经历浮现眼前，想起上课的时候我在最后面偷偷写代码的情景，想起自己刚开始学习js热情开心起来都忘记吃饭的热情，想起用js写俄罗斯方块时因为要不停地调试按键盘点鼠标差点被自习室的其他同学赶出来情景…..那个时候经常被人家问你天天都在搞什么？哈哈，也许未来我不会再做编程者 但是至少现在我还会一直努力着…….
