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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JavaScript 异步调用
Oct 25 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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 xml 入门学习资料
2011/01/01 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
CI框架常用方法小结
2016/05/17 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python脚本处理空格的方法
2016/08/08 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python字典实现伪切片功能
2020/10/28 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
创业计划书之网吧
2019/10/10 职场文书
python在package下继续嵌套一个package
2022/04/14 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server