jQuery选择器源码解读（一）：Sizzle方法

对jquery的sizzle各方法做了深入分析（同时也参考了一些网上资料）后，将结果分享给大家。我将采用连载的方式，对sizzle使用的一些方法详细解释一下，每篇文章介绍一个方法。

若需要转载，请写明出处，多谢。

/*
 * sizzle方法是sizzle选择器包的主要入口，jquery的find方法就是调用该方法获取匹配的节点
 * 该方法主要完成下列任务：
 * 1、对于单一选择器，且是id、tag、class三种类型之一，则直接获取并返回结果
 * 2、对于支持queryselectorall方法的浏览器，通过执行queryselectorall方法获取并返回匹配的dom元素
 * 3、除上之外则调用select方法获取并返回匹配的dom元素
 * 
 * 
 * @param selector 选择器字符串
 * @param context 执行匹配的最初的上下文（即dom元素集合）。若context没有赋值，则取document。
 * @param results 已匹配出的部分最终结果。若results没有赋值，则赋予空数组。
 * @param seed 初始集合
 */
function sizzle(selector, context, results, seed) {
	var match, elem, m, nodetype,
	// qsa vars
	i, groups, old, nid, newcontext, newselector;

	/*
	 * preferreddoc = window.document
	 * 
	 * setdocument方法完成一些初始化工作
	 */
	if ((context ? context.ownerdocument || context : preferreddoc) !== document) {
		setdocument(context);
	}

	context = context || document;
	results = results || [];

	/*
	 * 若selector不是有效地字符串类型数据，则直接返回results
	 */
	if (!selector || typeof selector !== "string") {
		return results;
	}

	/*
	 * 若context既不是document（nodetype=9），也不是element(nodetype=1)，那么就返回空集合
	 */
	if ((nodetype = context.nodetype) !== 1 && nodetype !== 9) {
		return [];
	}

	// 若当前过滤的是html文档，且没有设定seed，则执行if内的语句体
	if (documentishtml && !seed) {

		/* 
		 * 若选择器是单一选择器，且是id、tag、class三种类型之一，则直接获取并返回结果
		 * 
		 * rquickexpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/
		 * 上述正则表达式括号内三段依次分别用来判断是否是id、tag、class类型的单一选择器
		 * 上述正则表达式在最外层圆括号内有三个子表达式（即三个圆括号括起来的部分），
		 *   分别代表id、tag、class选择器的值，在下面代码中，分别体现在match[1]、match[2]、match[3]
		 */
		if ((match = rquickexpr.exec(selector))) {
			// speed-up: sizzle("#id")
			// 处理id类型选择器，如：#id
			if ((m = match[1])) {
				// 若当前上下文是一个document，则执行if内语句体
				if (nodetype === 9) {
					elem = context.getelementbyid(m);
					// 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, opera, and webkit
						// return items
						// by name instead of id
						/*
						 * 一些老版本的浏览器会把name当作id来处理，
						 * 返回不正确的结果，所以需要再一次对比返回节点的id属性
						 */ 
						if (elem.id === m) {
							results.push(elem);
							return results;
						}
					} else {
						return results;
					}
				} else {
					// context is not a document
					/*
					 * contains(context, elem)用来确认获取的elem是否是当前context对象的子对象
					 */
					if (context.ownerdocument
							&& (elem = context.ownerdocument.getelementbyid(m))
							&& contains(context, elem) && elem.id === m) {
						results.push(elem);
						return results;
					}
				}

				// speed-up: sizzle("tag")
				// 处理tag类型选择器，如：span
			} else if (match[2]) {
				push.apply(results, context.getelementsbytagname(selector));
				return results;

				// speed-up: sizzle(".class")
				/*
				 * 处理class类型选择器，如：.class
				 * 下面条件判断分别是：
				 * m = match[3]：有效的class类型选择器
				 * support.getelementsbyclassname 该选择器的p支持getelementsbyclassname
				 * context.getelementsbyclassname 当前上下文节点有getelementsbyclassname方法
				 * 
				 */ 
				
			} else if ((m = match[3]) && support.getelementsbyclassname
					&& context.getelementsbyclassname) {
				push.apply(results, context.getelementsbyclassname(m));
				return results;
			}
		}

		// qsa path
		/*
		 * 若浏览器支持queryselectorall方法且选择器符合queryselectorall调用标准，则执行if内语句体
		 * 在这里的检查仅仅是简单匹配
		 * 第一次调用sizzle时，rbuggyqsa为空
		 * 
		 * if语句体内对当前context对象的id的赋值与恢复，是用来修正queryselectorall的一个bug
		 * 该bug会在某些情况下把当前节点（context）也作为结果返回回来。
		 * 具体方法是，在现有的选择器前加上一个属性选择器：[id=xxx]，
		 * xxx 为context的id，若context本身没有设置id，则给个默认值expando。
		 */
		
		if (support.qsa && (!rbuggyqsa || !rbuggyqsa.test(selector))) {
			nid = old = expando;
			newcontext = context;
			// 若context是document，则newselector取自selector，否则为false
			newselector = nodetype === 9 && selector;

			// qsa works strangely on element-rooted queries
			// we can work around this by specifying an extra id on the
			// root
			// and working up from there (thanks to andrew dupont for
			// the technique)
			// ie 8 doesn't work on object elements
			if (nodetype === 1 && context.nodename.tolowercase() !== "object") {
				groups = tokenize(selector);

				if ((old = context.getattribute("id"))) {
					/*
					 * rescape = /'|\\/g,
					 * 这里将old中的单引号、竖杠、反斜杠前加一个反斜杠
					 * old.replace(rescape, "\\$&")代码中的$&代表匹配项
					 */
					nid = old.replace(rescape, "\\$&");
				} else {
					context.setattribute("id", nid);
				}
				nid = "[id='" + nid + "'] ";

				// 重新组合新的选择器
				i = groups.length;
				while (i--) {
					groups[i] = nid + toselector(groups[i]);
				}
				/*
				 * rsibling = new regexp(whitespace + "*[+~]")
				 * rsibling用于判定选择器是否存在兄弟关系符
				 * 若包含+~符号，则取context的父节点作为当前节点
				 */
				newcontext = rsibling.test(selector) && context.parentnode
						|| context;
				newselector = groups.join(",");
			}

			if (newselector) {
				/*
				 * 这里之所以需要用try...catch，
				 * 是因为jquery所支持的一些选择器是queryselectorall所不支持的，
				 * 当使用这些选择器时，queryselectorall会报非法选择器，
				 * 故需要jquery自身去实现。
				 */
				try {
					// 将queryselectorall获取的结果并入results，而后返回resulsts
					push.apply(results, newcontext
							.queryselectorall(newselector));
					return results;
				} catch (qsaerror) {
				} finally {
					if (!old) {
						context.removeattribute("id");
					}
				}
			}
		}
	}

	// all others
	// 除上述快捷方式和调用queryselectorall方式直接获取结果外，其余都需调用select来获取结果
	/*
	 * rtrim = new regexp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)"
	 *			+ whitespace + "+$", "g"),
	 * whitespace = "[\\x20\\t\\r\\n\\f]";
	 * 上述rtrim正则表达式的作用是去掉selector两边的空白，空白字符由whitespace变量定义
	 * rtrim的效果与new regexp("^" + whitespace + "+|" + whitespace + "+$", "g")相似
	 */
	return select(selector.replace(rtrim, "$1"), context, results, seed);
}