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 相关文章推荐
图片完美缩放
Sep 07 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
javascript 数组操作详解
Jan 29 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP中的output_buffering详细介绍
2014/09/27 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
document.compatMode介绍
2009/05/21 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
造型师求职自荐信
2013/09/27 职场文书
企业文化口号
2014/06/12 职场文书
工作年限证明模板
2015/06/15 职场文书
单身证明范本
2015/06/15 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python