Programming

jQuery 源码精粹2 -- 选择器

引言

jQuery 主要解决两个问题：

  • 对DOM节点进行操作。
  • 发送Ajax请求并解析响应。

操作DOM节点之前，首先需要选中节点，这一篇我们来研究和节点选择器相关的代码。

init.js

片段一

在上一篇我们提到，在生成jQuery.fn.init实例时，通过解析传入的selector参数，根据不同的selector形式，生成相应的jQuery object，那么背后的代码具体是如何实现的呢？

1
2
3
4
5
6
7
8
9
init = jQuery.fn.init = function( selector, context, root ) {
	var match, elem;

	// HANDLE: $(""), $(null), $(undefined), $(false)
	if ( !selector ) {
		return this;
	}
	.....
}

构造函数接收selector, context 和 root三个参数，context通常是一个DOM element，如果为空的话则是document, root通常是document。

如果传入的selector为空，则不作任何处理直接返回jQuery object。

片段二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Handle HTML strings
if ( typeof selector === "string" ) {
	if ( selector[ 0 ] === "<" &&
		selector[ 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 );
	}
	...
}

首先处理的是selector为html string的情况，相应的match变量不为空:

1
2
3
4
5
6
7
8
9
10
11
12
if ( match && ( match[ 1 ] || !context ) ) {

	// HANDLE: $(html) -> $(array)
	if ( match[ 1 ] ) {
		jQuery.merge( this, jQuery.parseHTML(
			match[ 1 ],
			context && context.nodeType ? context.ownerDocument || context : document,
			true
		) );
		
		return this;
	}

在这种情况下，调用jQuery.parseHTML()方法来解析传入的html string,生成一组DOM节点，并调用jQuery.merge()方法，将这组DOM节点插入jQuery object。

片段三

1
2
3
4
5
6
7
8
9
10
11
12
// HANDLE: $(#id)
else {
	elem = document.getElementById( match[ 2 ] );

	if ( elem ) {

		// Inject the element directly into the jQuery object
		this[ 0 ] = elem;
		this.length = 1;
	}
	return this;
}

当传入的string是#id格式时，直接调用JavaScript原生的getElementById方法获取DOM节点，并将其插入jQuery object。

片段四

1
2
3
4
5
6
7
8
9
// HANDLE: $(expr, $(...))
else if ( !context || context.jquery ) {
	return ( context || root ).find( selector );

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
	return this.constructor( context ).find( selector );
}

如果selector字符串是表达是形式，则调用find函数处理。根据selector.js及selector-sizzle中的定义： jQuery.find = Sizzle;, find函数调用Sizzle引擎，来解析selector， 关于Sizzle引擎的原理可以参考其官方文档，本文限于篇幅就不作展开了。

可以从jQuery官方文档获得完整的selector形式列表，其中的绝大部分是通过Sizzle引擎支持的。

片段五

1
2
3
4
5
// HANDLE: $(DOMElement)
  else if ( selector.nodeType ) {
	this[ 0 ] = selector;
	this.length = 1;
	return this;

这里处理的是selector为DOMElement的情形，比较简单，直接将DOMElement插入jQuery object。

片段六

1
2
3
4
5
6
7
8
9
// HANDLE: $(function)
// Shortcut for document ready
  else if ( jQuery.isFunction( selector ) ) {
	return root.ready !== undefined ?
		root.ready( selector ) :

		// Execute immediately if ready is not present
		selector( jQuery );
}

这里处理的是一个特殊情况，对于简写形式$(function),调用其完整版函数document.ready(function)。