jQuery.fn = jQuery.prototype = {
jquery: core_version,
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
var match, elem;
if ( !selector ) {
return this;
}
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
if ( match && (match[1] || !context) ) {
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );
} else {
this.attr( match, context[ match ] );
}
}
}
return this;
} else {
elem = document.getElementById( match[2] );
if ( elem && elem.parentNode ) {
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );
} else {
return this.constructor( context ).find( selector );
}
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
} 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 );
},
selector: "",
length: 0,
toArray: function() {
return core_slice.call( this );
},
get: function( num ) {
return num == null ?
this.toArray() :
( num < 0 ? this[ this.length + num ] : this[ num ] );
},
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 );
},
ready: function( fn ) {
jQuery.ready.promise().done( fn );
return this;
},
slice: function() {
return this.pushStack( core_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] ] : [] );
},
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);
},
push: core_push,
sort: [].sort,
splice: [].splice
};
jQuery.fn.init.prototype = jQuery.fn;
我们先看上面源码中最后面一句jQuery.fn.init.prototype = jQuery.fn;
上一篇我们说过了。这样做就是实现了jQuery.fn.init的protptype指向了jQuery.fn的prototype
这样实现了链式编程的操作。
下面我们就一个一个看这个函数里面做了什么
首先就是Init这个函数
selector有一下7中分支情况:
DOM元素
body(优化)
字符串:HTML标签,HTML字符串,#id,选择器表达式
函数(作为ready回调函数)
最后返回伪数组
toArray:把JQuery集合中所有DOM元素恢复成一个数组
pushStack:取一个数组中的元素,将其放入堆上,返回新的堆上的元素集合(jQuery对象)
end:大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例,并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时,应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集,可以使用 end() 从堆栈中弹出新集合。
get:说到get需要把它和eq一起来说 eq返回的是一个jquery对象(这个用了pushStack),get返回的是一个html 对象数组(这个用了toArray)。
each:为每个匹配到的元素规定运行的函数。
ready:当页面加载完在一一运行函数。
frist:选取匹配好的元素集合中的第一个元素。
last:选取匹配好的元素集合中的最后一个元素。
map: 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象
下一章准备我对上面的方法做一些详细的解释和对比,包括他们的用法
原创:http://blog.csdn.net/zzx252373003/article/details/10911469