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>
以上这篇jQuery原理系列-css选择器的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态，下面以一个实例为大家详细介绍下具体的实现，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了jquery对象和DOM对象的任意相互转换的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-02-02
在该系列之前的文章使用 jQuery：UI 项目中，我介绍了使用 jQuery 代码中的插件来提高 web 应用程序的效率。2010-06-06
之前本人的工作和学习多以原生js 为主，对jQuery 一直都不是很了解，但jQuery 作为当今最优秀的js 类库之一，必须是要花时间好好学习下的，今天正好蛋疼，读了里面一些代码2011-04-04
这篇文章主要介绍了jQuery获得子元素个数的方法,实例分析了jQuery中children()方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
将一个字符串生成二维码图片，如果想要带log的二维码，可以在生成后的二维码中间部位自己添加一个小log，具体实现如下，感兴趣的朋友可以参考下2013-09-09
这篇文章主要介绍了jQuery实现简单隔行变色的方法,涉及jQuery针对页面元素样式的相关操作技巧,需要的朋友可以参考下2016-02-02
本文通过实例代码给大家介绍了jquery 双击编辑表格，需要的朋友参考下吧2017-06-06
这篇文章主要介绍了jQuery实现UI设置固定日期选择特效，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了jQuery实现防止提交按钮被双击的方法,涉及jQuery针对鼠标按键的操作技巧以及preventDefault方法对元素默认行为的修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最新评论