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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
微信小程序实现星级评价
Nov 20 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python生成不重复随机值的方法
2015/05/11 Python
python中管道用法入门实例
2015/06/04 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
求职意向书
2014/04/01 职场文书
员工生日会策划方案
2014/06/14 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
综治维稳工作汇报
2014/10/27 职场文书
Oracle中日期的使用方法实例
2022/07/07 Oracle