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选择器实现的更多相关文章

  1. jQuery原理系列-常用Dom操作

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply ...

  2. jQuery原理系列-工具函数

    jquery源码中有很多精妙的实现,对于我们每天都在使用的东西,一定要知其原理,如果遇到不能使用jquery环境,也能自己封装原生的代码实现. 1.检测类型 众所周知typeof 不能用来检测数据,会 ...

  3. jQuery原理系列-Dom Ready

    ready事件是jquery的一个很重要的功能,在很久很久以前,我们是使用window.onload监听页面加载成功的,onload事件的好处是你不用考虑浏览器兼容性,也不需要依赖任何框架就可以写,但 ...

  4. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. （3）选择元素——（4）css选择器（CSS selectors）

    The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, ...

  6. Selenium系列（十二） - 自动化必备知识之CSS选择器的详细使用

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  7. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  8. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  9. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

随机推荐

  1. win7系统实现内外网同时连接图文教程

    解决方案:修改路由表 在工作中,经常会遇到切换内外网的网络情况,通常情况下都是断开/连接网络,很麻烦.我们可以使用route命令来解决此类问题,route add.route delete.route ...

  2. shell脚本中执行sql脚本并传递参数(mysql为例)

    1.mysql脚本文件 t.sql insert into test.t values(@name,@age); exit 2.shell脚本文件 a.sh  (为方便演示,与t.sql文件放在同一目 ...

  3. routes 学习

    对于routes的学习,感觉还是看官方文档理解的比较快,主要说明connect和resource Setting up routes¶ It is assumed that you are using ...

  4. Xshell 5的快捷键

    Xshell 5的快捷键 1. 点击下图中的按钮查看快捷键: 2. 快捷键备忘录: 序号 功能 快捷键 备注 1 在窗口和撰写栏之间切换 Alt+I   2 全屏 Alt+Enter   3     ...

  5. 小笔记----about JC

    JC  project JAVA,Mysql. 页面用velocity template engine render的html/css Apache Velocity template engine ...

  6. 「CF55D」Beautiful numbers

    传送门 Luogu 解题思路 毒瘤数位DP,发现一个前缀我们只需要记录它对 \(\operatorname{lcm}(1,2,3,\cdots,9)=2520\) 取模的值即可,所以我们在 DP 时记 ...

  7. 本地模拟内存溢出并分析Dump文件

    java Dump文件分析 前言 dump文件是java虚拟机内存在某一时间点的快照文件,一般是.hprof文件,下面自己模拟一下本地内存溢出,生成dump文件,然后通过mat工具分析的过程. 配置虚 ...

  8. （转）C#的 GC工作原理基础

    作为一位C++出身的C#程序员,我最初对垃圾收集(GC)抱有怀疑态度,怀疑它是否能够稳定高效的运作:而到了现在,我自己不得不说我已经逐渐习惯并依赖GC与我的程序“共同奔跑”了,对“delete”这个习 ...

  9. Matplotlib 图形绘制

    章节 Matplotlib 安装 Matplotlib 入门 Matplotlib 基本概念 Matplotlib 图形绘制 Matplotlib 多个图形 Matplotlib 其他类型图形 Mat ...

  10. 微信小程序自定义组件-下拉框

    这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件 知识点:组件,animation,获取当前点击元 ...