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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
vue实现tab栏点击高亮效果
Aug 19 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
python迭代器与生成器详解
2016/03/10 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
python实现推箱子游戏
2020/03/25 Python
python实现大转盘抽奖效果
2019/01/22 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python标准库OS模块详解
2020/03/10 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
iostream与iostream.h的区别
2015/01/16 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
周年庆典邀请函范文
2014/01/23 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
校园演讲稿汇总
2014/05/21 职场文书
党校学习心得体会范文
2014/09/09 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript