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. Hive的存储和MapReduce处理——数据清洗（Part2）

    日期:2019.11.14 博客期:116 星期四 基本的处理类 import java.sql.Connection; import java.sql.DriverManager; import j ...

  2. Xcode10升级问题:Multiple commands produce Info.plist

    升级到Xcode10以后,编译过程遇到的第一个问题就是类似于这样的: Multiple commands produce '/Users/jiaxiaoyan/Library/Developer/Xc ...

  3. MyBatis插入时获取自增长主键

    在某些场景下,我们需要使用mybatis返回生成的主键值.Mybatis在insert和update标签中就提供了这种功能. 方法1: <insert id=”indetifyId” useGe ...

  4. java异常处理动手动脑问题解决和课后总结

    动手动脑 一.问题:请阅读并运行AboutException.java示例,然后通过后面的几页PPT了解Java中实现异常处理的基础知识. 1.源代码 import javax.swing.*; cl ...

  5. 模板语法（DOM与Vue数据绑定）

    Vue.js使用了基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据. 插值 文本:{{ }}数据绑定最常见的形式就是使用Mustache语法(双大括号)的文本插值,解释为普 ...

  6. Day3-F-Buy Low Sell High-CodeForces867E

    You can perfectly predict the price of a certain stock for the next N days. You would like to profit ...

  7. 086、Java数组之对象数组的动态初始化

    01.代码如下: package TIANPAN; class Book { private String title; private double price; public Book(Strin ...

  8. 多元线性回归算法python实现（非常经典）

    对于多元线性回归算法,它对于数据集具有较好的可解释性,我们可以对比不过特征参数的输出系数的大小来判断它对数据的影响权重,进而对其中隐含的参数进行扩展和收集,提高整体训练数据的准确性.整体实现代码如下所 ...

  9. Jquery制作插件---内容切换

    //需求:点击左右导航箭头,实现内容的切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. SQL注入的原理及分析

    注入攻击的本质:将用户输入的数据当做代码执行. 有2个限制条件: 1.用户能够控制输入. 2.原本程序要执行的代码,拼接了用户输入的数据后进行执行. 定义:用户输入的数据被当做SQL语句执行. 以下面 ...