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. eclispe javaw.exe in your current path的解决方法

    https://blog.csdn.net/bd2569/article/details/70576666 问题背景:解压缩下面文件夹后打开eclipse软件(是安装包,解压即可使用的那种)弹出“.. ...

  2. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  3. 解决Ubuntu(linux)系统中PHP的curl函数无法使用的问题

    我之前用的Windows的服务器,未出现问题,后来把服务器重装了系统,今天在学微信公众号获取信息的时候,发现curl函数出现了问题...... 解决方法 首先连接上服务器,找到/etc/php/7.0 ...

  4. linux动态库(.so)和静态库(.a)的区别

    静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.编译之后程序文件大,但加载快,隔离性也好. 动态库在程序编译时并不会被连接到目标代码中,而是在程序运行时才被载入,因此在程序运行时 ...

  5. Spark 读 Hive（不在一个 yarn 集群）

    方法一 1. 找到目标 Hive 的 hive-site.xml 文件,拷贝到 spark 的 conf 下面. 在我的情况下 /etc/hive/conf/hive-site.xml -> / ...

  6. Spring JMSTemplate 与 JMS 原生API比较

    博客分类: JMS Spring 2.x   JMSUtil与Spring JmsTemplate的对比 Author:信仰 Date:2012-4-20 未完待续,截止日期2012-4-20 从以下 ...

  7. centos7安装mariadb（mysql）

    centos7 默认可以yum -y install mariadb-server mariadb mariadb-client mariadb-devel 如果出现错误 GPG key retrie ...

  8. k-近邻算法原理入门-机器学习

    //2019.08.01下午机器学习算法1——k近邻算法1.k近邻算法是学习机器学习算法最为经典和简单的算法,它是机器学习算法入门最好的算法之一,可以非常好并且快速地理解机器学习的算法的框架与应用.2 ...

  9. 性能测试中TPS上不去的几种原因

    性能测试中TPS上不去的几种原因 什么叫TPS: TPS(Transaction Per Second):每秒事务数,指服务器在单位时间内(秒)可以处理的事务数量,一般以request/second为 ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮标签

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...