jQuery选择器代码详解(八)——addCombinator函数

Unity3D安装:离线安装 Unity Unity 下载助手 (Download Assistant) 支持离线部署。在这种部署方式中,可下载用于安装 Unity 的所有文件,然后生成脚本以便在未接入互联网的其他计算机上重复相同的安装。运行下载助手,并在一台计算机上正常安装 Unity。此计算机必须有足够的可用磁盘空间来下载所有文件。单击下拉选单并选择 __Custom__,然后选择要将文件下载到的位置。打开 PC 的文件管理器,导航到之前指定的自定义位置文件夹,然后在该文件夹内查找。整理翻译,转载请注明出处! 阅读详情

function addCombinator(matcher, combinator, base)

1、源码

function addCombinator(matcher, combinator, base) {
	var dir = combinator.dir, checkNonElements = base
			&& dir === "parentNode", doneName = done++;

	return combinator.first ?
	// Check against closest ancestor/preceding element
	function(elem, context, xml) {
		while ((elem = elem[dir])) {
			if (elem.nodeType === 1 || checkNonElements) {
				return matcher(elem, context, xml);
			}
		}
	} :

	// Check against all ancestor/preceding elements
	function(elem, context, xml) {
		var data, cache, outerCache, dirkey = dirruns + " " + doneName;

		// We can't set arbitrary data on XML nodes, so they don't
		// benefit from dir caching
		if (xml) {
			while ((elem = elem[dir])) {
				if (elem.nodeType === 1 || checkNonElements) {
					if (matcher(elem, context, xml)) {
						return true;
					}
				}
			}
		} else {
			while ((elem = elem[dir])) {
				if (elem.nodeType === 1 || checkNonElements) {
					outerCache = elem[expando] || (elem[expando] = {});
					if ((cache = outerCache[dir])
							&& cache[0] === dirkey) {
						if ((data = cache[1]) === true
								|| data === cachedruns) {
							return data === true;
						}
					} else {
						cache = outerCache[dir] = [ dirkey ];
						cache[1] = matcher(elem, context, xml)
								|| cachedruns;
						if (cache[1] === true) {
							return true;
						}
					}
				}
			}
		}
	};
}

2、功能

生成关系选择器的执行函数。

3、参数

matcher——位置关系前连续的过滤选择器匹配函数数组,该函数用于匹配通过位置关系获得的节点是否符合选择器要求。在实际执行过程中,该函数可能是关系选择器前已生成的elementMatcher(matchers)。例如:div.map>span,在Sizzle编译遇到>时,会将div.map的编译函数作为第一个参数调用addCombinator函数,用以检查获取的span父节点是否满足div.map这两个条件。

combinator——关系选择器对应Expr.relative中的值,Expr.relative中各种关系选择器的值如下。使用该参数的first属性来确定返回的是仅检查紧邻对象的函数还是遍历所有可能对象的函数。将通过如下代码:elem = elem[dir],获取指定位置关系的节点,其中dir等于combinator.dir。

Expr.relative : {
	">" : {
		dir : "parentNode",
		first : true
	},
	" " : {
		dir : "parentNode"
	},
	"+" : {
		dir : "previousSibling",
		first : true
	},
	"~" : {
		dir : "previousSibling"
	}
}

base——该参数与combinator.dir一起,确定变量checkNonElement的值,代码如下。该值从字面理解为当前检查的是非DOM元素,就是当elem.nodeType!=1的时候,若该值为true,则会执行匹配函数,否则结束本次循环。

4、返回函数

4.1 若关系选择器是>或+,则返回如下函数:

function(elem, context, xml) {
	while ((elem = elem[dir])) {
		if (elem.nodeType === 1 || checkNonElements) {
			return matcher(elem, context, xml);
		}
	}
}
4.1.1 功能

若检查element类型节点(即checkNonElements==false),迭代获取elem指定位置关系的第一个element类型节点(elem.nodeType == 1),执行匹配函数,检查该节点是否符合要求,若符合返回true,否则返回false;

若检查所有类型节点(即checkNonElements==true),获取elem指定位置关系的紧邻节点,执行匹配函数,检查该节点是否符合要求,若符合返回true,否则返回false;

有些人或许会问,不是说是紧邻关系吗?那代码中为何要出现迭代获取这一过程呢?这是因为,个别浏览器会把节点文本之间的换行符看成是TextNode,故在处理过程中,需要跳过这些节点,直到下一个element节点。

4.1.2 参数

elem——待检查的单个节点元素。

context——执行整个选择器字符串匹配的上下文节点,大部分时候是没有用途。

xml——当前搜索对象是HTML还是XML文档,若是HTML,则xml参数为false。

4.2  若关系选择器是~或空格,则返回如下函数:

//Check against all ancestor/preceding elements
function(elem, context, xml) {
	var data, cache, outerCache, dirkey = dirruns + " " + doneName;

	// We can't set arbitrary data on XML nodes, so they don't
	// benefit from dir caching
	if (xml) {
		while ((elem = elem[dir])) {
			if (elem.nodeType === 1 || checkNonElements) {
				if (matcher(elem, context, xml)) {
					return true;
				}
			}
		}
	} else {
		while ((elem = elem[dir])) {
			if (elem.nodeType === 1 || checkNonElements) {
				outerCache = elem[expando] || (elem[expando] = {});
				if ((cache = outerCache[dir])
						&& cache[0] === dirkey) {
					if ((data = cache[1]) === true
							|| data === cachedruns) {
						return data === true;
					}
				} else {
					cache = outerCache[dir] = [ dirkey ];
					cache[1] = matcher(elem, context, xml)
							|| cachedruns;
					if (cache[1] === true) {
						return true;
					}
				}
			}
		}
	}
};

4.2.1 功能

若检查的是XML文档,则其过程与4.1返回函数一致,见上述代码中if ( XML ) { ... }中大括号内的代码。

若是HTML文档,则根据matcher匹配当前元素,若匹配成功,返回true;否则返回false。

4.2.2 参数

elem——待检查的单个节点元素。

context——执行整个选择器字符串匹配的上下文节点,大部分时候是没有用途。

xml——当前搜索对象是HTML还是XML文档,若是HTML,则xml参数为false。

4.2.3 代码说明

内部变量

dirkey——缓存节点检测结果用的键。在一次执行过程中,若一个节点被检查过,则会在这个节点的dirkey属性(属性名称为dirkey的值)中记录下检测结果(true或false),那么在本次执行过程中,再次遇到该节点时,不需要再次检测了。之所以需要缓存,因为多个节点会存在同一个父节点或兄弟节点,利用缓存可以减少检测的次数,提高性能。

dirruns——每次执行通过matcherFromGroupMatchers组织的预编译代码时都会产生一个伪随机数,用以区别不同的执行过程。

doneName——每次执行addCombinator函数时,done变量都会加1,用以区别生成的不同的位置关系匹配函数。

cachedruns——用来记录本次匹配是第几个DOM元素。例如:div.map>span,有3个元素符合span选择器,则针对每个元素执行>匹配函数时,cachedruns依次为0、1、2。cachedruns的作用按照代码可以直接理解为在一个执行过程中,针对同一个元素使用elementMatchers进行匹配过程中,再次遇到同一个元素时,可以直接从获取不匹配的结果,但是,我想不出哪个情况下会发生这种事情。若有人遇到,请告知,多谢!

代码解释

while ((elem = elem[dir])) {
	if (elem.nodeType === 1 || checkNonElements) {
		// 若elem节点的expando属性不存在,则赋予空对象,并同时赋予outerCache
		// 若elem节点的expando属性存在,则将其值赋予outerCache
		outerCache = elem[expando] || (elem[expando] = {});
		/* 
		 * 若outCache[dir]有值,且其第一个元素等于当前的dirkey,
		 *     则说明当前位置选择器在本次执行过程中已检测过该节点,执行if内的语句,从缓存中直接获取结果
		 * 若outCache[dir]不存在,或第一个元素不等于当前的dirkey,
		 *     则说明当前位置选择器在本次执行过程中还未检测过该节点,执行else内的语句,匹配节点并将结果放入缓存
		 */
		if ((cache = outerCache[dir])
				&& cache[0] === dirkey) {
			// 若缓存中检测结果等于true或cachedruns的值,则返回检测结果(非true皆为false),
			// 否则继续循环获取上一个符合位置关系的节点进行匹配
			if ((data = cache[1]) === true
					|| data === cachedruns) {
				return data === true;
			}
		} else {
			// 将数组[ dirkey ]赋予outerCache[dir]及cache
			cache = outerCache[dir] = [ dirkey ];
			// 将匹配成功,将true赋予cache[1],否则将cachedruns的值赋予cache[1]
			cache[1] = matcher(elem, context, xml)
					|| cachedruns;
			// 若匹配结果为true,则返回true,否则继续循环获取上一个符合位置关系的节点进行匹配
			if (cache[1] === true) {
				return true;
			}
		}
	}
}

jQuery选择器代码详解(一)——Sizzle方法

jQuery选择器代码详解(二)——select方法

jQuery选择器代码详解(三)——tokenize方法

jQuery选择器代码详解(四)——Expr.preFilter

jQuery选择器代码详解(五)——实例说明tokenize的解析过程

jQuery选择器代码详解(六)——Sizzle选择器匹配逻辑分析

jQuery选择器代码详解(七)——elementMatcher函数

jQuery选择器代码详解(八)——addCombinator函数

华为od机试|华为od机试真题2025|华为od题库|华为od机考|2025C卷B卷 华为od机试|华为od机试真题2025|华为od题库|华为od机考|华为od机试|华为od机试真题2025|华为od题库|华为od机考|华为od机试|华为od机试真题2025|华为od题库|华为od机考|华为od机试|华为od机试真题2025|华为od题库|华为od机考|B卷C卷 阅读详情

相关推荐

【一】PCIe基础知识

Linux PCIe基础知识

他山之石 可以攻玉 4万+

初探 jQuery 的 Sizzle 选择器

这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成。在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你展示出如何借用Sizzle之手实现自定义选择器(也许更标准的叫法叫做过滤符)和它与YUI 选择器的大致比较。 前序 jQuery相比1.2的版本,在内部代码的构造上已经出现...

weixin_34205076的博客 330

别再只怪贴片厂了!从MLCC内部裂纹,看懂物料质量与工艺应力的博弈

本文深入分析了MLCC内部裂纹的失效原因,提供了从裂纹形态学到生产全流程的失效风险地图的完整分析框架。通过实战案例和检测技术组合,帮助工程师精准锁定MLCC失效背后的真凶,优化物料质量和工艺应力管理。

weixin_33122947的博客 293

全新选择器引擎 jQuery Sizzle初探

jQuery相比1.2的版本,在内部代码的构造上已经出现了巨大的变化,其之一便是模块的分发。随着jQuery被用来构建web app的场合愈来愈多,它的性能自然受到了大部分开发者的高度关注,它的内部实现机理又是如何,比如选择器的实现。 Sizzle,作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目,可以用于其他框架:Mool, ...

weixin_30369087的博客 149

使用patchelf与独立glibc解决Cursor/VSCode远程开发环境兼容性问题

本文针对Cursor/VSCode远程开发连接Ubuntu 18.04、CentOS 7等老系统时因GLIBC版本过低导致的兼容性问题,提供了一套安全高效的解决方案。核心思路是通过编译独立的glibc-2.28环境,并利用patchelf工具修改远程服务端的node可执行文件,使其优先使用新版glibc,从而在不升级系统库、不影响系统稳定性的前提下,完美解决远程开发环境“罢工”的难题。

weixin_28835789的博客 565

CCAR-23《正常类飞机适航规定》和CCAR-25《运输类飞机适航规定》差异分析

通过详细比较CCAR-23和CCAR-25在适用范围、设计标准、性能要求、运行限制、安全冗余和环境适应性方面的差异,我们可以看出,CCAR-23适用于轻型飞机,开发和运营成本较低,设计要求相对简单。而CCAR-25适用于大规模运输飞机,设计、开发、测试和运营管理都需要更高的复杂性和投入。

qq_41854911的博客 3707

jquery 源码2.2.4

jquery 源码2.2.4

FancierX的专栏 2861

RT-DETR改进策略【模型轻量化】| 替换骨干网络为 GhostNet V3 2024华为的重参数轻量化模型

本文记录的是基于 GhostNetV3 的 RT-DETR轻量化改进方法研究。GhostNetV3的轻量模块采用方法,训练时为深度可分离卷积和1×1卷积添加,推理时通过移除分支、折叠操作,能够在不增加推理成本的同时提高性能,从而实现RT-DETR的轻量化改进。

Limiiiing的博客 973

jQuery 源码系列(六)sizzle 编译

欢迎来我的专栏查看系列文章。 compile 讲了这么久的 Sizzle,总感觉差了那么一口气,对于一个 selector,我们把它生成 tokens,进行优化,优化的步骤包括去头和生成 seed 集合。对于这些种子集合,我们知道最后的匹配结果是来自于集合中的一部分,似乎接下来的任务也已经明确:对种子进行过滤(或者称其为匹配)。 匹配的...

weixin_33958366的博客 190

领域知识图谱构建的技术流程

因此概念的属性定义十分重要,通常大部分知识库中的概念属性都是采用人工定义等方式生成的,通用知识图谱则可以从开放数据集中获取概念的属性,然后从在线百科中学习实体的属性,并对实体属性进行往上规约从而生成概念的属性。由于百科的分类体系都是经过了百科管理员或是高级编辑人员的校验,其分类系统中的数据可靠性非常高,因此从百科中抽取概念和实体,通常将标题作为实体的候选,而将百科中的分类系统直接作为概念的候选。为了对知识进行合理的组织,更好地描述知识本身与知识之间的关联,需要对知识图谱的模式进行良好的定义。

weixin_43961909的博客 334

关务管理项目专题:SAP 与关衡关务系统的进出口报关业务集成(1)需求和方案整理

一个拥有进出口业务的企业就需要报关,而关务系统就是用来辅助企业日常进出口报关,同时数字化、合规化报关业务的有效工具。本章属于关务管理项目专题系列,以 SAP 与关衡关务系统的进出口报关业务集成为实例,详细讲解报关业务的需求和方案整理。

SAP李斌,本人承诺所有原创文章均不使用任何AI生成技术,请大家放心阅读。 2078

jQuery JavaScript Library v1.10.2源码

/*! * jQuery JavaScript Library v1.10.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors * R...

weixin_30436101的博客 1263

智联招聘Python岗位数据采集:基于API请求的校园招聘信息爬取实战

本项目开发了一个智联招聘Python岗位校园招聘数据采集系统,采用requests库直接调用API接口获取结构化数据。系统通过分析API接口结构,配置完整的请求头、Cookie和身份验证参数,实现了10页数据的批量采集。采集内容包括工作名称、薪资范围、企业信息等10个关键字段,并存储为Excel格式。项目严格遵守网络爬虫规范,合理控制请求频率,数据仅用于技术学习和就业分析。技术实现涉及API逆向工程、JSON数据处理、防御性编程等核心技能,为学生职业规划和教育机构教学改革提供数据支持。

那些看似不起波澜的日复一日,会在某天让你看到坚持的意义 630

jQuery中的选择器引擎Sizzle

读Sizzle的源码,分析的Sizzle版本号是2.3.3。 Sizzle的Github主页 浏览器原生支持的元素查询方法: 方法名 方法描述 兼容性描述 getElementById 根据元素ID查询元素 IE6+, Firefox 2+, Chrome 4+, Safari 3.1+ getElementsByTagName 根据元素名称查...

惊蛰小鱼的博客 426

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

jquery 源码分析十一 - Sizzle

这篇开始分析Sizzle中的终极匹配器。 首先讲一下普通情况下,如:div a的匹配。在matcherFromToken函数中,可以看出匹配函数的组装方式,见源码: if ( (matcher = Expr.relative[ tokens[i].type ]) ) { matchers = [ addCombinator(elementMatcher( matcher...

a13025481511的博客 253

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理

这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白。这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏。   看这一部分的源码需要有一个完整的概念后去看才比较容易看懂,所以我们先把整个编译的原理阐述以后再进行解析。   还是以上次的那个CSS选择器为例:#chua > a + .group labe[for="age"]。按照我们正常解析

chen_hua89的博客 439

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

jquery 源码分析十 --Sizzle

考虑到Sizzle里面函数互相调用的关系,接下来的函数就不会按从上到下的顺序分析,而是采用调用的顺序进行分析。 这篇博客参考了这篇文章里的说明(靠这篇文章才理解的。。。。) 首先就是要讲到编译函数,JS是单线程语言,但是在执行程序时,一段函数的运行,会导致线程的阻塞,导致整个程序停顿。这时候异步就出现了,异步的原理不多说了。异步使得JS能够更加灵活的运行,克服了其单线程的限制...

a13025481511的博客 186

JQuery Sizzle引擎源代码分析

    最近在拜读艾伦在慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦。有没有吹牛?是不是我说大话了? 什么是Sizzle引擎?     我们经常使用JQuery的选择器查询元素,查询的选择器有简单也有复杂:    简单点:“div”、“.navi”、“div.navi”。     复杂点:"div input[type='checkbox']"、"...

weixin_33749242的博客 109

sizzle分析记录:分解流程

<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <div name="newsletter" /><p>1<...

weixin_30588907的博客 75

jQuery Sizzle 入口 [ 源码分析 ]

var Sizzle = function( selector, context, results, seed ) { //context 默认为document,可以人为指定 results = results || []; context = context || document; var origContext = context; //判断文档节点 if ( context

杨有梦的博客 2249

详解jQuery选择器正则表达式

1、空白 whitespace = "[\\x20\\t\\r\\n\\f]", 在字符串中,斜杠是用于转义的,若想输出斜杠,必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示,如下: whitespace = /[\x20\t\r\n\f]/, 之所以将五种字符定义为空白,出此CSS3标准,其原话:Only the characters "space" (U+002

mole的专栏 6829

Javascript如何将中文转换UTF16和UTF8字节数组

之前因为项目的需要,需要把带有中文的字符串转换成字节数组和图片数据合并后,以二进制数据上传给服务器端。 之前,看到网上有利用Array.prototype.map.call(str, function (c) { return c.charCodeAt(0); })方法将字符串转换成字节数组,但实测结果表明该方式实现了下列功能: 1、若字符是单字节字符,则用一个小于128的数值来表示。 2、

mole的专栏 6634

动态添加的HTML的自动渲染

这两天在写一个用EasyUI的前台,遇到动态向Layout添加HTML内容时没有自动渲染的问题,查了一下网上的资料后得以解决,具体如下: $("#content").html(data); $.parser.parse("#content"); 其中,#content 是 layout 的 Id ,data 是向#content容器中添加的HTML代码。 第一行代码作用是将 Id 是#con

mole的专栏 6587

Google Chrome代码调试(一)——Console的使用

Google Chrome控制台为开发者提供了网页和应用程序调试的几种方法,本文通过基本操作、控制台API、命令行API来介绍控制台的使用。 基本操作 1、开启控制台     可以通过下列三种方式开启控制台:     a) 按下Chrome界面右上方的Chrome代码调试(一)" TITLE="Console的使用——Google Chrome代码调试(一)" />按钮,选择菜单:更多工具

mole的专栏 6525

如何将div高度填满剩余高度

下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">    <div id="navbar"></div>    <div id="content"></div> </div> css如下: html, body {     padding: 0px;     margin: 0px;     heig

mole的专栏 5959

jQuery选择器代码详解(一)——Sizzle方法

对jQuery的Sizzle各方法做了深入分析后,将结果分享给大家。我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法。 若需要转载,请写明出处,多谢。 /* * @param selector 选择器字符串 * @param context 执行匹配的最初的上下文(即DOM元素)。若context没有赋值,则取document。 * @param res

mole的专栏 2704
上一篇: jQuery选择器代码详解(七)——elementMatcher函数
下一篇: 资料收集
mole
博客等级 码龄26年 75粉丝 166原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值