jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

Expr.preFilter是tokenize方法中对ATTR、CHILD、PSEUDO三种选择器进行预处理的方法。具体如下:

Expr.preFilter : {
	"ATTR" : function(match) {
		/*
		 * 完成如下任务:
		 * 1、属性名称解码
		 * 2、属性值解码
		 * 3、若判断符为~=,则在属性值两边加上空格
		 * 4、返回最终的mtach对象
		 *
		 * match[1]表示属性名称,
		 * match[1].replace(runescape, funescape):将属性名称中的十六进制数解码成
		 *   单字节unicode字符或双字节unicode字符(中文或其它需要两个字节表达的文字)
		 * 正则表达式的详细说明,可以参看我的“详解jQuery选择器正则表达式”文章
		 */
		match[1] = match[1].replace(runescape, funescape);

		/*
		 * 将属性值解码
		 * match[4]:表示放在单引号或双引号内的属性值
		 * match[5]: 表示不用引号括起来的属性值
		 */
		match[3] = (match[4] || match[5] || "").replace(runescape,
				funescape);

		/*
		 * ~=的意思是单词匹配,在W3C中对单词的定义是以空白为不同单词的分隔符
		 * 故此处在match[3]两边加上空格后,可以利用indexOf,正确识别出该单词是否存在
		 */
		if (match[2] === "~=") {
			match[3] = " " + match[3] + " ";
		}

		/*
		 * 返回有用的前四个元素结果
		 */
		return match.slice(0, 4);
	},

	"CHILD" : function(match) {
		/*
		 * 完成如下几项任务:
		 * 1、把命令中child和of-type之前的字符变成小写字符
		 * 2、对于nth开头的选择器检查括号内的数据有效性
		 * 3、match[4]和match[5]分别存放xn+b中的x和b,x和b允许是负数
		 * 4、返回最终的match对象
		 *
		 * match[1]:(only|first|last|nth|nth-last)中的一个
		 */
		match[1] = match[1].toLowerCase();

		/*
		 * 对于nth-child、nth-of-type、nth-last-child、nth-last-of-type四种类型括号内需设置有效数据
		 * 而其它则括号内不允许有任何数据
		 */
		if (match[1].slice(0, 3) === "nth") {
			/*
			 * 若选择器括号内没有有效参数,则抛出异常
			 * 举例:若选择器是nth或nth(abc)则属于非法选择器
			 */
			if (!match[3]) {
				Sizzle.error(match[0]);
			}
			/*
			 * 下面先以nth-child()为例介绍一下语法,以便更好的理解下面代码的作用
			 * nth-child允许的几种使用方式如下:
			 * 	 :nth-child(even)
			 * 	 :nth-child(odd)
			 * 	 :nth-child(3n)
			 * 	 :nth-child(+2n+1)
			 * 	 :nth-child(2n-1)
			 * 下面代码中赋值号左侧的match[4]、match[5]用于分别记录括号内n前及n后的数值,包括正负号
			 * 对于:nth-child(even)和:nth-child(odd)来说,match[4]为空,
			 *   所以返回 2 * (match[3] === "even" || match[3] === "odd")的计算结果
			 *   因为在js中true=1,false=0,所以(match[3] === "even" || match[3] === "odd")等于1
			 *   因此,2 * (match[3] === "even" || match[3] === "odd")的计算结果为2
			 *
			 * 等号右侧的“+”的作用是强制类型转换,将之后的字符串转换成数值类型
			 */
			match[4] = +(match[4] ? match[5] + (match[6] || 1)
					: 2 * (match[3] === "even" || match[3] === "odd"));
			match[5] = +((match[7] + match[8]) || match[3] === "odd");

		} else if (match[3]) {
			/*
			 * 若非nth起头的其它CHILD类型选择器带有括号说明,则抛出异常
			 * 这里jQuery并没有严格按照W3C的规则来判定,因为其允许:first-child()的这种形式存在
			 * 也就是对于jQuery来说:first-child()等同于:first-child,是合法选择器
			 */
			Sizzle.error(match[0]);
		}

		return match;
	},

	"PSEUDO" : function(match) {
		/*
		 * 完成如下任务:
		 * 1、获取伪类中用引号括起来的值
		 * 2、对于非引号括起来的值,若存在伪类嵌套,则进一步解析确定当前伪类实际结束位置,
		 *  获取当前伪类的完整字符串和值
		 * 3、返回match中的前三项的副本。
		 *
		 * unquoted表示括号内非引号括起来的值,
		 * 以:eq(2)为例,unquoted=2
		 */
		var excess, unquoted = !match[5] && match[2];

		/*
		 * 因为pseudo与child的匹配正则表达式有交集,所以,需要把属于child的部分忽略掉
		 */
		if (matchExpr["CHILD"].test(match[0])) {
			return null;
		}
		/*
		 * 若括号内的值使用引号(match[3])括起来的,
		 * 则将除引号外的值(match[4])赋给match[2]。
		 * match[3]表示引号。
		 */
		if (match[3] && match[4] !== undefined) {
			match[2] = match[4];
		} else if (unquoted
				/*
				 * rpseudo.test(unquoted):用来测试unquoted是否包含伪类,
				 * 若包含伪类,则说明有可能存在伪类嵌套的可能性,需要进一步对unquoted进行解析
				 * 例如: :not(:eq(3))
				 */
				&& rpseudo.test(unquoted)
				&&
				/*
				 * 获取unquoted中连续有效地选择器最后一个字符所在位置
				 */
				(excess = tokenize(unquoted, true))
				&&
				/*
				 * unquoted.indexOf(")", unquoted.length - excess)
				 *   从之前获得的连续有效地选择器最后一个字符所在位置之后找到")"所在位置,
				 *   通常就在当前位置之后。
				 * 再减去unquoted.length,用来获得match[0]中的有效完整的伪类字符串最后位置,
				 *   注意,此时excess是一个负值
				 *
				 */
				(excess = unquoted.indexOf(")", unquoted.length
						- excess)
						- unquoted.length)) {

			// 获取有效的完整伪类match[0]和伪类括号内的数据match[2]
			match[0] = match[0].slice(0, excess);
			match[2] = unquoted.slice(0, excess);
		}

		// 返回match前三个元素的副本
		return match.slice(0, 3);
	}
}
(0)

相关推荐

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

    /* * select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务: * 1.调用tokenize方法完成对选择器的解析 * 2.对于没有初始集合(即seed没有赋值)且是单一块选择器(即选择器字符串中没有逗号), * 完成下列事项: * 1) 对于首选择器是ID类型且context是document的,则直接获取对象替代传入的context对象 * 2) 若选择器是单一选择器,且是id.class.tag类型的,则直接获取并返回匹配的DOM元素 * 3) 获取最后一个id.cl

  • jQuery选择器源码解读(五):tokenize的解析过程

    以下分析基于jQuery-1.10.2.js版本. 下面将以$("div:not(.class:contain('span')):eq(3)")为例,说明tokenize和preFilter各段代码是如何协调完成解析的.若想了解tokenize方法和preFilter类的每行代码的详细解释,请参看如下两篇文章: http://www.jb51.net/article/63155.htm http://www.jb51.net/article/63163.htm 下面是tokenize方

  • jQuery选择器源码解读(一):Sizzle方法

    对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明出处,多谢. /* * Sizzle方法是Sizzle选择器包的主要入口,jQuery的find方法就是调用该方法获取匹配的节点 * 该方法主要完成下列任务: * 1.对于单一选择器,且是ID.Tag.Class三种类型之一,则直接获取并返回结果 * 2.对于支持querySelectorAll方法

  • jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析

    近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-1.10.2版本的Sizzle的匹配逻辑(预编译结果)做一整体说明,这里就不谈过多的细节了. Sizzle的匹配过程采用的是以从右到左的逆向匹配法为基础的改进版本,因为HTML的搜索毕竟和文本匹配有差异,它有自己独特的一面,所以,需要针对HTML的搜索进行优化.在此先申明一点,下面所说的关

  • jQuery选择器源码解读(七):elementMatcher函数

    要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助. elementMatcher(matchers) 1.源码 复制代码 代码如下: function elementMatcher(matchers) {  return matchers.length > 1 ? function(elem, context, xml) {   var i = matchers

  • jQuery选择器源码解读(八):addCombinator函数

    function addCombinator(matcher, combinator, base) 1.源码 复制代码 代码如下: function addCombinator(matcher, combinator, base) {  var dir = combinator.dir, checkNonElements = base    && dir === "parentNode", doneName = done++; return combinator.fir

  • jQuery选择器源码解读(三):tokenize方法

    /* * tokenize方法是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为"div.class,span",则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * group[1][0] = {type:'TAG',value:'span',mat

  • jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

    Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(runescape, funescape)

  • jQuery源码解读之addClass()方法分析

    本文较为详细的分析了jQuery源码解读之addClass()方法.分享给大家供大家参考.具体分析如下: 给jQuery原型对象扩展addClass功能,jQuery.fn就是jQuery.prototype 复制代码 代码如下: jQuery.fn.extend({ /* 可以看出这是一个函数名叫addClass的插件方法. */     addClass: function( value ) {         var classes, elem, cur, clazz, j, finalV

  • jQuery源码解读之hasClass()方法分析

    本文较为详细的分析了jQuery源码解读之hasClass()方法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: jQuery.fn.extend({     hasClass: function( selector ) { //将要检查的类名selector赋值给className, l为选择器选择的当前要检查的jQuery对象数组的长度.         var className = " " + selector + " ",          

随机推荐