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. jeDate日期控件精确到秒

    案例下载 链接: https://pan.baidu.com/s/1m7eEW6K6Bt1t-0OjVY_Wxw 密码: xmei <script type="text/javascr ...

  2. 《React后台管理系统实战 ：四》产品分类管理页：添加产品分类、修改(更新)产品分类

    一.静态页面 目录结构 F:\Test\react-demo\admin-client\src\pages\admin\category add-cate-form.jsx index.jsx ind ...

  3. A. Optimal Currency Exchange 兑换硬币，剩下的钱最少

    A. Optimal Currency Exchange time limit per test 1.5 seconds memory limit per test 512 megabytes inp ...

  4. java 解析json格式数据（转）

    2012-07-30 16:43:54|  分类: java |  标签:java  json  |举报|字号 订阅     有时候我们可能会用到json格式的数据进行数据的传输,那么我们怎么把接收到 ...

  5. windowsService 程序

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 题解 P2801 【教主的魔法】

    分块入门题,不错的,建议大家做一做 开始学习 先看一下数列分块入门 2 这道题想让我们求区间[l,r]>=c的个数,然后我们可以看到"数列分块入门 2"是求区间[l,r]&l ...

  7. FBV CBV

    目录 CBV 和 FBV 介绍 路由绑定 urlpatterns = [ # 1)项目启动,将test函数地址绑定给/test/路由 # 2)请求/test/访问后台,后台就会调用绑定的test函数 ...

  8. greenplum 存储过程 变量类型

    参考: https://www.cnblogs.com/kungfupanda/p/4478917.html

  9. layerui上传文件

    参考: http://www.layui.com/doc/modules/upload.html <1> 文件上传(以下函数必须要在js文件加载时执行) upload.render({ e ...

  10. elasticsearch kibana logstash(ELK)的安装集成应用

    官网关于kibana的学习指导网址是:https://www.elastic.co/guide/en/kibana/current/index.html Kibana是一个开源的分析和可视化平台,设计 ...