jquery源码解析：jQuery原型的方法和属性介绍

标签：style   blog   http   io   ar   color   使用   sp   strong   

上一篇主要讲解了jQuery原型中最重要的方法init。接下来再讲一些比较常用的原型方法和属性

core_slice = [].slice,

jQuery.fn = jQuery.prototype = {

　　toArray: function(){　　　　

　　　　//把jQuery对象转换成原生元素的数组，比如：$("div").toArray()，{0:"div",1:"div"}   ->   ["div","div"]

　　　　return core_slice.call( this );

　　},

　　get: function( num ) {　　//得到原生的元素（可以取到某一个）
　　　　return num == null ?

　　　　　　this.toArray() :( num < 0 ? this[ this.length + num ] : this[ num ] );    

　　　　　　//[]，除了取下标，还可以取属性。如果this是数组，就取下标，如果是对象就取属性

　　},

　　pushStack: function( elems ) {    //栈的实现，先进后出。

　　　　var ret = jQuery.merge( this.constructor(), elems );   //把传入的elems（数组）转换成jQuery对象

　　　　//this.constructor()是一个空的jQuery对象，jQuery()。

　　　　ret.prevObject = this;　　　　//使p(jQuery)的prevObject指向div(jQuery) 

　　　　//这里的作用是为了回溯用，比如，$("div").pushStack($("p")).css()后，我想对div进行处理，这时可以调用$("div").pushStack($("p")).css().end().css()，后面这个css就会只对div进行处理了，end方法就是取p的prevObject属性。 
　　　　ret.context = this.context;

　　　　return ret;　　　　//返回p(jQuery)
　　},//举个列子，$("div").pushStack($("p")).css();这个css就只对p进行处理。　　

　　end: function() {
　　　　return this.prevObject || this.constructor(null);  //如果没有，就创建一个空的jQuery对象
　　},　　

　　slice: function() {　　//$("div").slice(1,3).css().end().css()，假设有4个div，那么第一个css只对第二个和第三个有效果，end之后，第二个css对这4个div都有效果。
　　　　return this.pushStack( core_slice.apply( this, arguments ) );   //4个div.pushStack(2个div)
　　},　

　　each: function( callback, args ) {    //实例方法调用的是工具方法（很多这种调用方式）。
　　　　return jQuery.each( this, callback, args );   //$("div").each(a) -> return jQuery.each( $("div"), a, undefined)，第三个参数供jQuery内部使用。

 　　　　//jQuery.each会循环每一个div，执行a回调方法，a.call( obj[ i ], i, obj[ i ] );也就是在div的执行上下文，执行a(i,div)，其中i为当前div的index值。
　　},　　

　　ready: function( fn ) {
　　　　//可以先看我的另外一篇博客：http://www.cnblogs.com/chaojidan/p/4121788.html
　　　　jQuery.ready.promise().done( fn );

　　　　return this;
　　},　

　　eq: function( i ) {
　　　　var len = this.length,
　　　　j = +i + ( i < 0 ? len : 0 );   //+i就是把传入的数字字符转化成数字,比如:"3"->3.
　　　　return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
　　},//eq方法也可以用end方法，返回到原jQuery对象。

　　map: function( callback ) {　　　　//$("div").map(a)

　　　　return this.pushStack( jQuery.map(this, function( elem, i ) {  
　　　　　　return callback.call( elem, i, elem );　　　　　　　　　　

　　　　　　//map方法是针对每一个div,执行function(elem,i)方法，传入div，和div的index值。里面调用callback.call( elem, i, elem ),a.call(div,i,div)，如果执行a方法得到的是undefined或者是null，就会过滤掉此div。
　　　　}));
　　},

　　.....

}

差不多就这些了，其实我还想说下js各种方法调用时，里面的参数个数和顺序，面试官很喜欢问。请看我这篇博客：http://www.cnblogs.com/chaojidan/p/4142338.html

加油！

jquery源码解析：jQuery原型的方法和属性介绍

标签：style   blog   http   io   ar   color   使用   sp   strong   

原文地址：http://www.cnblogs.com/chaojidan/p/4141413.html