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 相关文章推荐
jquery()函数的三种语法介绍
Oct 09 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
jquery获取节点名称
Apr 26 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
Vue如何获取数据列表展示
Dec 11 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源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Python中的各种装饰器详解
2015/04/11 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python 实现图片批量压缩的示例
2020/12/18 Python
numpy实现RNN原理实现
2021/03/02 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
幼儿园三八妇女节活动总结
2015/02/06 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python