jQuery选择器源码解读(二):select方法


Posted in Javascript onMarch 31, 2015
/*
 * select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务:
 * 1、调用tokenize方法完成对选择器的解析
 * 2、对于没有初始集合(即seed没有赋值)且是单一块选择器(即选择器字符串中没有逗号),
 *  完成下列事项:
 *  1) 对于首选择器是ID类型且context是document的,则直接获取对象替代传入的context对象
 *  2) 若选择器是单一选择器,且是id、class、tag类型的,则直接获取并返回匹配的DOM元素
 *  3) 获取最后一个id、class、tag类型选择器的匹配DOM元素赋值给初始集合(即seed变量)
 * 3、通过调用compile方法获取“预编译”代码并执行,获取并返回匹配的DOM元素
 * 
 * @param selector 已去掉头尾空白的选择器字符串
 * @param context 执行匹配的最初的上下文(即DOM元素集合)。若context没有赋值,则取document。
 * @param results 已匹配出的部分最终结果。若results没有赋值,则赋予空数组。
 * @param seed 初始集合
 */
function select(selector, context, results, seed) {
	
	var i, tokens, token, type, find, 
	// 调用tokenize函数解析selector
	match = tokenize(selector);

	// 若没有提供初始集合
	if (!seed) {
		// Try to minimize operations if there is only one group
		// 若只有一组选择器,即选择器字符串没有逗号
		if (match.length === 1) {
			// Take a shortcut and set the context if the root selector
			// is an ID
			/*
			 * 下面代码是用来处理根选择器是ID类型的快捷方式
			 * 
			 * 在此使用slice[0]来创建一个新的集合,
			 * 确保原有的集合不会被之后代码变更掉
			 */
			tokens = match[0] = match[0].slice(0);
			/*
			 * 若选择器是以id类型开始,且第二个是关系符(即+~>或空格),
			 * 则获取id所属对象作为context继续完成后续的匹配
			 * 
			 * 此处的条件判断依次为:
			 * tokens.length > 2 :若tokens有两个以上的选择器
			 * (token = tokens[0]).type === "ID" :第一个选择器的类型为ID(即以#开头的),
			 * support.getById :支持getElementById函数
			 * context.nodeType === 9 :context对象是document
			 * documentIsHTML :当前处理的是HTML代码
			 * Expr.relative[tokens[1].type] :第二个tokens元素是一个关系(即+~>或空格)
			 * 在满足上面所有条件的情况下,执行if内的语句体
			 */
			if (tokens.length > 2 && (token = tokens[0]).type === "ID"
					&& support.getById && context.nodeType === 9
					&& documentIsHTML && Expr.relative[tokens[1].type]) {

				// 将当前上下文指向第一个ID选择器指定的节点对象
				context = (Expr.find["ID"](token.matches[0].replace(
						runescape, funescape), context) || [])[0];
				
				// 若当前上下文内没有指定ID对象,则直接返回results
				if (!context) {
					return results;
				}
				
				// 选择器字符串去掉第一个ID选择器
				selector = selector.slice(tokens.shift().value.length);
			}

			// Fetch a seed set for right-to-left matching
			/* 
			 * 下面while循环的作用是用来根据最后一个id、class、tag类型的选择器获取初始集合
			 * 举个简单例子:若选择器是"div[title='2']",
			 * 代码根据div获取出所有的context下的div节点,并把这个集合赋给seed变量,
			 * 然后在调用compile函数,产生预编译代码,
			 * 预编译代码完成在上述初始集合中执行[title='2']的匹配
			 * 
			 * 首先,检查选择器字符串中是否存在与needsContext正则表达式相匹配的字符
			 * 若没有,则将依据选择器从右到左过滤DOM节点
			 * 否则,将先生成预编译代码后执行(调用compile方法)。 
			 */
			
			/*
			 * "needsContext" : new RegExp("^" + whitespace
			 *		+ "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("
			 *		+ whitespace + "*((?:-\\d)?\\d*)" + whitespace
			 *		+ "*\\)|)(?=[^-]|$)", "i")
			 * needsContext用来匹配选择器字符串中是否包含下列内容:
			 * 1、>+~三种关系符
			 * 2、:even、:odd、:eq、:gt、:lt、:nth、:first、:last八种伪类
			 * 其中,(?=[^-]|$)用来过滤掉类似于:first-child等带中杠的且以上述八个单词开头的其它选择器
			 */
			i = matchExpr["needsContext"].test(selector) ? 0
					: tokens.length;
			while (i--) {
				token = tokens[i];

				// Abort if we hit a combinator
				// 遇到关系符跳出循环
				if (Expr.relative[(type = token.type)]) {
					break;
				}
				if ((find = Expr.find[type])) {
					// Search, expanding context for leading sibling
					// combinators
					/*
					 * rsibling = new RegExp(whitespace + "*[+~]")
					 * rsibling用于判定token选择器是否是兄弟关系符
					 */
					if ((seed = find(token.matches[0].replace(
							runescape, funescape), rsibling
							.test(tokens[0].type)
							&& context.parentNode || context))) {

						// If seed is empty or no tokens remain, we can
						// return early
						// 剔除刚用过的选择器
						tokens.splice(i, 1);
						selector = seed.length && toSelector(tokens);
						/*
						 * 若selector为空,说明选择器仅为单一id、class、tag类型的,
						 * 故直接返回获取的结果,否则,在获取seed的基础上继续匹配
						 */
						if (!selector) {
							push.apply(results, seed);
							return results;
						}

						break;
					}
				}
			}
		}
	}

	// Compile and execute a filtering function
	// Provide `match` to avoid retokenization if we modified the
	// selector above
	/*
	 * 先执行compile(selector, match),它会返回一个“预编译”函数,
	 * 然后调用该函数获取最后匹配结果
	 */
	compile(selector, match)(seed, context, !documentIsHTML, results,
			rsibling.test(selector));
	return results;
}
Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
微信小程序实现的一键复制功能示例
Apr 24 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 #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
You might like
收藏的一个php小偷的核心程序
2007/04/09 PHP
mysql时区问题
2008/03/26 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python中去空格函数的用法
2014/08/21 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Python中Qslider控件实操详解
2021/02/20 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
药学专业个人自我评价
2013/11/11 职场文书
揭牌仪式主持词
2014/03/19 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
nginx请求限制配置方法
2021/07/09 Servers
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby