jQuery原理系列-css选择器的简单实现


Posted in Javascript onJune 07, 2016

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选择器的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
js中常用的Math方法总结
Jan 12 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
javascript实现抽奖程序的简单实例
Jun 07 #Javascript
浅谈javascript中new操作符的原理
Jun 07 #Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 #Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 #Javascript
浅析BootStrap栅格系统
Jun 07 #Javascript
浅谈jQuery 选择器和dom操作
Jun 07 #Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 #Javascript
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
简单的页面缓冲技术
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
JS解析XML的实现代码
2009/11/12 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
浅谈python中set使用
2016/06/30 Python
python对json的相关操作实例详解
2017/01/04 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
django有哪些好处和优点
2020/09/01 Python
python中pyplot基础图标函数整理
2020/11/10 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
德国网上超市:myTime.de
2019/08/26 全球购物
介绍一下游标
2012/01/10 面试题
异步传递消息系统的作用
2016/05/01 面试题
物业招聘计划书
2014/01/10 职场文书
校园公益广告语
2014/03/13 职场文书
给校长的建议书600字
2014/05/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
八月一日观后感
2015/06/10 职场文书
高温慰问简报
2015/07/21 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书