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函数获取html中className所在的内容并去除标签
Sep 08 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Vue自定义指令详解
Jul 28 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Web应用开发TypeScript使用详解
May 25 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学习笔记之二
2011/01/17 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript定义函数的方法
2010/12/06 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
班组长工作职责
2013/12/25 职场文书
音乐教学案例
2014/01/30 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
作风建设演讲稿
2014/05/23 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
招标授权委托书样本
2014/09/23 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang