jQuery选择器源码解读(一):Sizzle方法


Posted in Javascript onMarch 31, 2015

对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 该选择器的div支持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);
}

各位朋友,若觉得写得不错,帮我顶一下,给点动力,多谢!

Javascript 相关文章推荐
js 深拷贝函数
Dec 04 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
JavaScript中创建字典对象(dictionary)实例
Mar 31 #Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 #Javascript
JavaScript父子窗体间的调用方法
Mar 31 #Javascript
JavaScript操作cookie类实例
Mar 31 #Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 #Javascript
javascript制作2048游戏
Mar 30 #Javascript
JavaScript模拟实现继承的方法
Mar 30 #Javascript
You might like
用PHP实现递归循环每一个目录
2010/08/08 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php中session与cookie的比较
2015/01/27 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
构建高效的python requests长连接池详解
2020/05/02 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
简历中的自我评价范文
2014/02/05 职场文书
批评与自我批评材料
2014/02/15 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
单位作风建设自查报告
2014/10/23 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
如何使用php生成zip压缩包
2021/04/21 PHP