您现在的位置是:群英 > 开发技术 > web开发
jQuery的Sizzle怎么样使用,能做什么
Admin发表于 2022-05-14 15:50:38587 次浏览
关于“jQuery的Sizzle怎么样使用,能做什么”的知识点有一些人不是很理解,对此小编给大家总结了相关内容,文中的内容简单清晰,易于学习与理解,具有一定的参考学习价值,希望能对大家有所帮助,接下来就跟随小编一起学习一下“jQuery的Sizzle怎么样使用,能做什么”吧。

对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家。我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法。

若需要转载,请写明出处,多谢。

/*
 * Sizzle方法是Sizzle选择器包的主要入口,jQuery的find方法就是调用该方法获取匹配的节点
 * 该方法主要完成下列任务:
 * 1、对于单一选择器,且是ID、Tag、Class三种类型之一,则直接获取并返回结果
 * 2、对于支持querySelectorAll方法的浏览器,通过执行querySelectorAll方法获取并返回匹配的DOM元素
 * 3、除上之外则调用select方法获取并返回匹配的DOM元素
 * 
 * 
 * @param selector 选择器字符串
 * @param context 执行匹配的最初的上下文(即DOM元素集合)。若context没有赋值,则取document。
 * @param results 已匹配出的部分最终结果。若results没有赋值,则赋予空数组。
 * @param seed 初始集合
 */
function Sizzle(selector, context, results, seed) {
	var match, elem, m, nodeType,
	// QSA vars
	i, groups, old, nid, newContext, newSelector;

	/*
	 * preferredDoc = window.document
	 * 
	 * setDocument方法完成一些初始化工作
	 */
	if ((context ? context.ownerDocument || context : preferredDoc) !== document) {
		setDocument(context);
	}

	context = context || document;
	results = results || [];

	/*
	 * 若selector不是有效地字符串类型数据,则直接返回results
	 */
	if (!selector || typeof selector !== "string") {
		return results;
	}

	/*
	 * 若context既不是document(nodeType=9),也不是element(nodeType=1),那么就返回空集合
	 */
	if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) {
		return [];
	}

	// 若当前过滤的是HTML文档,且没有设定seed,则执行if内的语句体
	if (documentIsHTML && !seed) {

		/* 
		 * 若选择器是单一选择器,且是ID、Tag、Class三种类型之一,则直接获取并返回结果
		 * 
		 * rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/
		 * 上述正则表达式括号内三段依次分别用来判断是否是ID、TAG、CLASS类型的单一选择器
		 * 上述正则表达式在最外层圆括号内有三个子表达式(即三个圆括号括起来的部分),
		 *   分别代表ID、Tag、Class选择器的值,在下面代码中,分别体现在match[1]、match[2]、match[3]
		 */
		if ((match = rquickExpr.exec(selector))) {
			// Speed-up: Sizzle("#ID")
			// 处理ID类型选择器,如:#ID
			if ((m = match[1])) {
				// 若当前上下文是一个document,则执行if内语句体
				if (nodeType === 9) {
					elem = context.getElementById(m);
					// Check parentNode to catch when Blackberry 4.6
					// returns
					// nodes that are no longer in the document #6963
					if (elem && elem.parentNode) {
						// Handle the case where IE, Opera, and Webkit
						// return items
						// by name instead of ID
						/*
						 * 一些老版本的浏览器会把name当作ID来处理,
						 * 返回不正确的结果,所以需要再一次对比返回节点的ID属性
						 */ 
						if (elem.id === m) {
							results.push(elem);
							return results;
						}
					} else {
						return results;
					}
				} else {
					// Context is not a document
					/*
					 * contains(context, elem)用来确认获取的elem是否是当前context对象的子对象
					 */
					if (context.ownerDocument
							&& (elem = context.ownerDocument.getElementById(m))
							&& contains(context, elem) && elem.id === m) {
						results.push(elem);
						return results;
					}
				}

				// Speed-up: Sizzle("TAG")
				// 处理Tag类型选择器,如:SPAN
			} else if (match[2]) {
				push.apply(results, context.getElementsByTagName(selector));
				return results;

				// Speed-up: Sizzle(".CLASS")
				/*
				 * 处理class类型选择器,如:.class
				 * 下面条件判断分别是:
				 * m = match[3]:有效的class类型选择器
				 * support.getElementsByClassName 该选择器的div支持getElementsByClassName
				 * context.getElementsByClassName 当前上下文节点有getElementsByClassName方法
				 * 
				 */ 
				
			} else if ((m = match[3]) && support.getElementsByClassName
					&& context.getElementsByClassName) {
				push.apply(results, context.getElementsByClassName(m));
				return results;
			}
		}

		// QSA path
		/*
		 * 若浏览器支持querySelectorAll方法且选择器符合querySelectorAll调用标准,则执行if内语句体
		 * 在这里的检查仅仅是简单匹配
		 * 第一次调用Sizzle时,rbuggyQSA为空
		 * 
		 * if语句体内对当前context对象的id的赋值与恢复,是用来修正querySelectorAll的一个BUG
		 * 该BUG会在某些情况下把当前节点(context)也作为结果返回回来。
		 * 具体方法是,在现有的选择器前加上一个属性选择器:[id=XXX],
		 * XXX 为context的id,若context本身没有设置id,则给个默认值expando。
		 */
		
		if (support.qsa && (!rbuggyQSA || !rbuggyQSA.test(selector))) {
			nid = old = expando;
			newContext = context;
			// 若context是document,则newSelector取自selector,否则为false
			newSelector = nodeType === 9 && selector;

			// qSA works strangely on Element-rooted queries
			// We can work around this by specifying an extra ID on the
			// root
			// and working up from there (Thanks to Andrew Dupont for
			// the technique)
			// IE 8 doesn't work on object elements
			if (nodeType === 1 && context.nodeName.toLowerCase() !== "object") {
				groups = tokenize(selector);

				if ((old = context.getAttribute("id"))) {
					/*
					 * rescape = /'|\\/g,
					 * 这里将old中的单引号、竖杠、反斜杠前加一个反斜杠
					 * old.replace(rescape, "\\$&")代码中的$&代表匹配项
					 */
					nid = old.replace(rescape, "\\$&");
				} else {
					context.setAttribute("id", nid);
				}
				nid = "[id='" + nid + "'] ";

				// 重新组合新的选择器
				i = groups.length;
				while (i--) {
					groups[i] = nid + toSelector(groups[i]);
				}
				/*
				 * rsibling = new RegExp(whitespace + "*[+~]")
				 * rsibling用于判定选择器是否存在兄弟关系符
				 * 若包含+~符号,则取context的父节点作为当前节点
				 */
				newContext = rsibling.test(selector) && context.parentNode
						|| context;
				newSelector = groups.join(",");
			}

			if (newSelector) {
				/*
				 * 这里之所以需要用try...catch,
				 * 是因为jquery所支持的一些选择器是querySelectorAll所不支持的,
				 * 当使用这些选择器时,querySelectorAll会报非法选择器,
				 * 故需要jquery自身去实现。
				 */
				try {
					// 将querySelectorAll获取的结果并入results,而后返回resulsts
					push.apply(results, newContext
							.querySelectorAll(newSelector));
					return results;
				} catch (qsaError) {
				} finally {
					if (!old) {
						context.removeAttribute("id");
					}
				}
			}
		}
	}

	// All others
	// 除上述快捷方式和调用querySelectorAll方式直接获取结果外,其余都需调用select来获取结果
	/*
	 * rtrim = new RegExp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)"
	 *			+ whitespace + "+$", "g"),
	 * whitespace = "[\\x20\\t\\r\\n\\f]";
	 * 上述rtrim正则表达式的作用是去掉selector两边的空白,空白字符由whitespace变量定义
	 * rtrim的效果与new RegExp("^" + whitespace + "+|" + whitespace + "+$", "g")相似
	 */
	return select(selector.replace(rtrim, "$1"), context, results, seed);
}

以上就是关于“jQuery的Sizzle怎么样使用,能做什么”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: Sizzle使用
相关信息推荐
2022-08-19 17:49:18 
摘要:Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。Flask使用 BSD 授权。Flask也被称为 "microframework" ,因为它使用简单的核心,用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具
2022-10-11 09:25:48 
摘要:这篇文章主要介绍了java文件操作输入输出详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
2022-07-20 17:50:55 
摘要:在go里定义错误异常的方式有两种,但都需要你的返回值是error类型的。第一种:使用golang标准库包errors来定义错误。第二种:借用struct结构体,创建一个struct的Error()方法。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部