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 相关文章推荐
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
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
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
javascript常用函数(1)
2015/11/04 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
angularjs实现天气预报功能
2020/06/16 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
python元组操作实例解析
2014/09/23 Python
Python文件处理
2016/02/29 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
tornado 多进程模式解析
2018/01/15 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python实现ATM系统
2020/02/17 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
家装业务员岗位职责
2015/04/03 职场文书
同意离婚答辩状
2015/05/22 职场文书
Nginx进程调度问题详解
2021/09/25 Servers