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. esxi虚拟机无法开机，提示“没有更多空间可供虚拟磁盘server-000001.vmdk使用。也许通过释放相关卷上的磁盘空间并单击 重试 继续此会话，单击 取消 可终止此会话”

    背景:esxi安装在32G的U盘上,硬盘总大小:1.64T,虚拟机A占用:600GB,虚拟机B占用:900GB.所以还有剩余不到200G左右. 原因是宿主机硬盘空间不足.通过图中可以看出空间已经只剩2 ...

  2. Element-UI中关于table表格的样式操作

    项目中使用到element-ui组件库,经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比 ...

  3. 【剑指Offer面试编程题】题目1522：包含min函数的栈--九度OJ

    题目描述: 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行为一个整数n(1<=n&l ...

  4. C 语言入门第五章--循环结构和选择结构

    C语言中有三大结构,分别是顺序结构.选择结构和循环结构: 逻辑运算: 与运算: && 或运算:|| 非运算:! ==== #include<stdio.h> int mai ...

  5. ZCGL大数据项目优化组件布置

    1.经JMeter并发性能测试,每个HBaseService服务的并发请求上限大概是1K,为了支持5W个并发请求量,需要增加部署节点,相应需要增加部署路由网管Zuul,为了隐藏多个路由网管Zuul的I ...

  6. 《Redis深度历险：核心原理和应用实践》千帆竞发——分布式锁

  7. JavaScript--选择器

    1.选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器. 2.选择的优点: --写法简洁: --完善的事件处理机制. 3.基本选择器: --基本选择器是j ...

  8. RCast 66: 射影几何与Rho演算

    Greg Meredith与Isaac DeFrain和Christian Williams一起讨论了射影几何及其在Rho演算中的作用. 原文链接及音频 https://blog.rchain.coo ...

  9. PyCharm 2018.1破解激活步骤

    1.下载破解补丁 下载地址:https://pan.baidu.com/s/1qjI9uHaw0x374rwu6H8djA 将下载下来的破解补丁放到C:\software\JetBrains\PyCh ...

  10. 尝试使用 Visual Studio Online (Cloud IDE)

    这里的 Visual Studio Online 不是 Azure DevOps ,他们虽然是相同的名称,却是不同的域名 https://online.visualstudio.com/ ,今天我们就 ...