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 相关文章推荐
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Web应用开发TypeScript使用详解
May 25 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
PHP新手上路(八)
2006/10/09 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
javascript如何创建对象
2016/08/29 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python实现简单遗传算法
2020/09/18 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
营销团队口号
2014/06/06 职场文书
党员公开承诺书2015
2015/01/21 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书