jQuery原理系列-css选择器实现

jQuery最强大的功能在于它可以通过css选择器查找元素，它的源码中有一半是sizzle css选择器引擎的代码，在html5规范出来之后，增加了document.querySelector和document.querySelectorAll直接查找元素，如果是做移动端开发的，使用jQuery的必要性大大降低。

用js代码实现css选择器，必然是用正则表达式来识别字符串了，当然浏览器提供的原生api 效率更高，以下代码只做原理性展示，并未优先性能，

例如

1）查找id显然是用document.getElementById更高效，浏览器已经做了hash，一次性找到元素不用遍历每个节点。

2）查找 name用document.getElementsByName更高效，浏览器已经做了一个含有该name的集合，

3）查找标签名用document.getElementsByTagName更高效，浏览器已经做了一个含有该tag集合，从这个集合中再查找子集显然可以少遍历很多的元素，至于浏览器是不是在元素创建的时候就更新了缓存的集合就不得而知了，但是从这个集合中判断是不是目标元素的子节点还要用contains也会有性能损耗。

好了，我们先不考虑用原生api优化选择器的问题，只用纯正则表达式来做一个简单的实现，先用正则判断如果含有#就是id选择器，如果含有点号就是class选择器，如果含有[]就是属性选择器，设定好查找目标后开始遍历子节点，要用递归函数遍历childNodes子节点的id,name,className,getAttribute是否匹配，如果匹配就返回该元素。完整的代码如下：

html:

<body><div><span id="sp_id">hello,id</span><span class="sp_class">hello,class</span><span name="sp_name" >hello,name</span><b>hello,tag</b></div></body>

javascript:

<script type="text/javascript">function find(el, selector) { //查找子节点，用法类似jquery的find函数，仅支持id,class,attr选择器，仅支持返回匹配的第一个元素var m = selector.match(/([#\.\[])([\w\W]+)/i);var type, key,attrName, result;if (m) {if (m[1] == ".") {type = "class"; key = m[2];} else if (m[1] == "#") {type = "id"; key = m[2];} if (m[1] == "[") {type = "attr";m = m[2].match(/(\w+)=(\w+)/i);attrName = m[1];key = m[2];}} else {type = "tag"; key = selector;}function findChild(node) {var c;for (var i = 0; i < node.childNodes.length; i++) {c = node.childNodes[i];if (type == "class" && c.className == key) {result = c;return;} else if (type == "id" && c.id == key) {result = c;return;} else if (type == "attr" &&  c.getAttribute && c.getAttribute(attrName) == key) {result = c;return;} else if (type == "tag" && c.tagName && c.tagName.toLowerCase() == key) {result = c;return;}findChild(c);}}findChild(el);return result;}console.log(find(document.body,"#sp_id").innerHTML);console.log(find(document.body,".sp_class").innerHTML);console.log(find(document.body,"[name=sp_name]").innerHTML);console.log(find(document.body,"b").innerHTML);</script>

转载于:https://www.cnblogs.com/windyfancy/p/5180973.html

jQuery原理系列-css选择器实现相关推荐

html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
jQuery 中的 CSS 选择器
#id id 选择器 $("#myDiv").css(...); 元素标签选择器 $("div") * 通用符选择器匹配所有元素 $("*&quo ...
【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
jquery拼接后css样式不生效_JQuery常用选择器以及操作属性和样式的方法介绍
JQuery日常操作有选择器,获取和操作属性,css样式,文本等等,下面是一些常用的操作,代码以图片形式(哈哈,其实还是我懒,大神别喷我,我还是渣渣),就是一些日常的学习笔记 JQuery中的属性选择 ...
Jmeter之CSS选择器/JQuery选择器关联
选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...
jQuery css选择器大全，总有你用得到的东西。
JQuery选择器首先我们深入了解止之后,发现要用到的选择器多种多样.今天我们就来总结一下各种选择器以及使用方法. 做一个大体的分类: 通过css选择器来提取元素: Query选择器的分类:通过cs ...
CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x
CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x 行间选择器 id选择器类选择器元素选择器通配符选择器
Jquery从入门到精通：二、选择器 2、选择器（1）CSS选择器
1.准备知识:CSS选择器:(参考文档:CSS2.0帮助文档) 代码: <body> <div> <p id="p1">足不出户订窗帘:< ...

jQuery原理系列-css选择器实现

jQuery原理系列-css选择器实现相关推荐

最新文章

热门文章