这篇也没什么好说的，初始化jQuery对象的函数要处理多种情况，已经被寒冬吐槽烂了。关联节点获取函数主要基于两个工具函数dir和sibling，前者基于指定的方向遍历，后者则遍历兄弟节点(真的不能合并？)。后面的一些API则主要调用这两个函数。大几百行代码，不过逻辑很简单
// Initialize a jQuery object
// A central reference to the root jQuery(document)
var rootjQuery,
// Use the correct document accordingly with window argument (sandbox)
document = window.document, // A simple way to check for HTML strings
// Prioritize #id over to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
//一个检查字符串是否包含HTML的简单正则。
//需要避免如<script>alert(1)</script>之类的XSS
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
//接下来就是被寒冬黑得不亦乐乎的真正的产生jQuery对象的函数了
init = jQuery.fn.init = function( selector, context ) {
var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
//??????为什么这里return 的是一个空数组？
//这只是显示问题
console.log(this.length);
return this;
} // Handle HTML strings
//处理HTML字符串
//当传入的是字符串时
if ( typeof selector === "string" ) {
//当传入的字符串类似于"<div >"
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 = rquickExpr.exec( selector );
} // Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context; // scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
//把DOM元素加到this里
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) ); // HANDLE: $(html, props)
//什么情况下context是PlainObject？
//处理$(html,props)这种情况。。所以第二个参数是{attrName:attrValue}，context此时为PlainObject
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
//为什么这里要调用函数？
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] ); // ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
} return this; // 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
//这里不能用push，是因为this是一个伪数组，但不能用自己写的push？
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: $(DOMElement)
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this; // HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return typeof rootjQuery.ready !== "undefined" ?
rootjQuery.ready( selector ) :
// Execute immediately if ready is not present
//否则立刻执行
selector( jQuery );
}
//如果传进来的是jQuery对象
if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
} return jQuery.makeArray( selector, this );
}; // Give the init function the jQuery prototype for later instantiation
//将init这个函数的原型设置为jQuery.fn，这样每个jQuery对象都可以共享jQuery.fn上的函数
init.prototype = jQuery.fn; // Initialize central reference
//文档节点的jQuery对象
rootjQuery = jQuery( document ); //后面关联节点时用来判断函数名是否带有Until或All的正则
var rparentsprev = /^(?:parents|prev(?:Until|All))/,
// methods guaranteed to produce a unique set when starting from a unique set
//标记某些方法是否需要确保返回的集合里每一个元素都唯一
guaranteedUnique = {
children: true,
contents: true,
next: true,
prev: true
}; jQuery.extend({
//按某一方向查找，返回匹配元素数组，注意这里有until
dir: function( elem, dir, until ) {
var matched = [],
cur = elem[ dir ];
while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
if ( cur.nodeType === 1 ) {
matched.push( cur );
}
cur = cur[dir];
}
return matched;
},
//按兄弟元素方向查找，返回匹配元素数组
sibling: function( n, elem ) {
var r = []; for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
} return r;
}
}); jQuery.fn.extend({
//这个函数应该和之前的is待在一块
has: function( target ) {
var i,
targets = jQuery( target, this ),
len = targets.length; return this.filter(function() {
for ( i = 0; i < len; i++ ) {
if ( jQuery.contains( this, targets[i] ) ) {
return true;
}
}
});
},
//匹配jQuery对象中每一个DOM元素最接近的父元素，最后会去重
closest: function( selectors, context ) {
var cur,
i = 0,
l = this.length,
matched = [],
pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
jQuery( selectors, context || this.context ) :
0; for ( ; i < l; i++ ) {
for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
// Always skip document fragments
//跳过文档碎片节点
if ( cur.nodeType < 11 && (pos ?
//pos此时是一个jQuery对象
pos.index(cur) > -1 : // Don't pass non-elements to Sizzle
cur.nodeType === 1 &&
//这里是检查cur是否和selectors匹配
jQuery.find.matchesSelector(cur, selectors)) ) {
//因为只匹配最近的一个节点
matched.push( cur );
break;
}
}
} return this.pushStack( matched.length > 1 ? jQuery.unique( matched ) : matched );
}, // Determine the position of an element within
// the matched set of elements
//其实本质上还是调用工具函数inArray，不过inArray设计得不错，错误返回-1，正确返回索引
index: function( elem ) { // No argument, return index in parent
//这个获得索引的方法很巧妙，检查自己前面有多少元素，就是自己的索引
if ( !elem ) {
return ( this[0] && this[0].parentNode ) ? this.first().prevAll().length : -1;
} // index in selector
//处理传进来的参数是elem的情况
if ( typeof elem === "string" ) {
return jQuery.inArray( this[0], jQuery( elem ) );
} // Locate the position of the desired element
return jQuery.inArray(
// If it receives a jQuery object, the first element is used
elem.jquery ? elem[0] : elem, this );
},
//这个添加方式颇为奇葩。。添加完还要unique一下。。添加完原有的selector也会没了。。
add: function( selector, context ) {
return this.pushStack(
jQuery.unique(
jQuery.merge( this.get(), jQuery( selector, context ) )
)
);
},
//把压栈之前的jQuery对象加过来，估计是后面有用
addBack: function( selector ) {
return this.add( selector == null ?
this.prevObject : this.prevObject.filter(selector)
);
}
}); //之所以需要这么个工具函数，是因为在遍历的时候需要考虑无用节点。。不过其实也没用几次。。
function sibling( cur, dir ) {
do {
cur = cur[ dir ];
} while ( cur && cur.nodeType !== 1 ); return cur;
} //这里为什么是each而不是extend?
//这里使用each的形式对下面的每一个函数进行处理
//下面这些函数就是调用前面的API，说明前面抽象得比较好
jQuery.each({
parent: function( elem ) {
var parent = elem.parentNode;
return parent && parent.nodeType !== 11 ? parent : null;
},
parents: function( elem ) {
return jQuery.dir( elem, "parentNode" );
},
parentsUntil: function( elem, i, until ) {
return jQuery.dir( elem, "parentNode", until );
},
next: function( elem ) {
return sibling( elem, "nextSibling" );
},
prev: function( elem ) {
return sibling( elem, "previousSibling" );
},
nextAll: function( elem ) {
return jQuery.dir( elem, "nextSibling" );
},
prevAll: function( elem ) {
return jQuery.dir( elem, "previousSibling" );
},
nextUntil: function( elem, i, until ) {
return jQuery.dir( elem, "nextSibling", until );
},
prevUntil: function( elem, i, until ) {
return jQuery.dir( elem, "previousSibling", until );
},
siblings: function( elem ) {
return jQuery.sibling( ( elem.parentNode || {} ).firstChild, elem );
},
children: function( elem ) {
return jQuery.sibling( elem.firstChild );
},
contents: function( elem ) {
//这里要判断元素是否是iframe
return jQuery.nodeName( elem, "iframe" ) ?
elem.contentDocument || elem.contentWindow.document :
jQuery.merge( [], elem.childNodes );
}
//处理函数，进行一层封装
}, function( name, fn ) {
jQuery.fn[ name ] = function( until, selector ) {
var ret = jQuery.map( this, fn, until ); if ( name.slice( -5 ) !== "Until" ) {
//当name不为xxxUntil时，说明第一个参数不是用来until的，而是选择符。
selector = until;
}
//含有选择符的话要过滤一下
if ( selector && typeof selector === "string" ) {
ret = jQuery.filter( selector, ret );
} if ( this.length > 1 ) {
// Remove duplicates
//当需要去重的时候去重
if ( !guaranteedUnique[ name ] ) {
ret = jQuery.unique( ret );
} // Reverse order for parents* and prev-derivatives
if ( rparentsprev.test( name ) ) {
ret = ret.reverse();
}
} return this.pushStack( ret );
};
});