上次我们分析了jQuery对象的构建方法以及如何去扩展jQuery对象的方法extend()。
这次让我们先看看jQuery本身还有那些静态属性和方法实例方法。
需要注意的是,这里定义的所有jQuery的静态属性/方法实例方法也是是jQuery对象的静态属性/方法实例方法。
jQuery.fn = jQuery.prototype = { init: function( selector, context ) { // code here ... }, // 为所有jQuery对象初始化一个空的选择器 selector: "", // The current version of jQuery being used jquery: "1.4.2", // 初始化 jQuery 对象长度(jQuery含有多少个DOM对象,长度就是几) length: 0, // 获取jQuery.length属性的方法 size: function() { return this.length; }, // 将this对象转为数组 //注意,这里的slice方法并不是Array.slice(),而是jQuery.slice() 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 // 取得匹配DOM对象的集合,或者根据传入的参获取对应的DOM对象 get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this.slice(num)[ 0 ] : this[ num ] ); }, // Take an array of elements and push it onto the stack // (returning the new matched element set) // 将一个数组或者对象压入栈中,同时返回一个新的对象集合 // 这是一个非常巧妙的方法,在后面,我们会看到 // jQuery利用这个方法来筛选、查找上一个,下一个对象 pushStack: function( elems, name, selector ) { // Build a new jQuery matched element set // 新建一个jQuery对象 var ret = jQuery(); // 如果传入的对象是数组 // 则调用Array.push方法 (jQuery.push只是Array.push的一个引用) // 如果是对象,则合并且返回一个新的jQuery对象 if ( jQuery.isArray( elems ) ) { push.apply( ret, elems ); } else { jQuery.merge( ret, elems ); } // Add the old object onto the stack (as a reference) // 将当前调用的对象(this),作为新jQuery对象的前一个对象 ret.prevObject = this; // 将当前调用的对象(this)的文档集、DOM对象集 // 或者jQuery对象赋给新的jQuery对象 ret.context = this.context; if ( name === "find" ) { // 如果name是find方法,构建一个子查询器(Sizzle) ret.selector = this.selector + (this.selector ? " " : "") + selector; } else if ( name ) { // 如果name是其他方法,则调用其他方法 ret.selector = this.selector + "." + name + "(" + selector + ")"; } // 返回这个新的jQuery对象 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方法 each: function( callback, args ) { return jQuery.each( this, callback, args ); }, // 判断jQuery是否载入完毕 ready: function( fn ) { // Attach the listeners // 调用bindReady方法,建立一个侦听 jQuery.bindReady(); // If the DOM is already ready // 如果DOM已经渲染完成 if ( jQuery.isReady ) { // Execute the function immediately // 执行fn,并且将jQuery作为参数传入fn中 // 实际上,$(function(){...})内的fn是一个存在于window/document对象下匿名函数 // 传入jQuery后,我们可以将它看作 // (function (jQuery){ ... })(jQuery); fn.call( document, jQuery ); // Otherwise, remember the function for later // 如果没有准备好,则将要执行的函数放到readyList数组中暂存 } else if ( readyList ) { // Add the function to the wait list readyList.push( fn ); } return this; }, // 调用jQuery.slice方法取对用dom元素 eq: function( i ) { return i === -1 ? this.slice( i ) : this.slice( i, +i + 1 ); }, // 获取对象中的第一个dom元素 first: function() { return this.eq( 0 ); }, // 获取对象中的最后一个dom元素 last: function() { return this.eq( -1 ); }, // 将函数实参转为数组 slice: function() { return this.pushStack( slice.apply( this, arguments ), "slice", slice.call(arguments).join(",") ); }, // 将当前jQuery对象中的每一个元素作为参数放入callback中执行,然后返回执行后的新数组 map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, // 返回当前调用对象之前的对象,注意pushStack() end: function() { return this.prevObject || jQuery(null); }, // For internal use only. // Behaves like an Array's method, not like a jQuery method. push: push, sort: [].sort, splice: [].splice };
现在jQuery中主要的实例方法已经分析完毕~
同时,最重要的静态方法extend也已经说明
下次将从api入手,依照Core Event Manipulation Ajax这四类来尝试分析
