自从jQuer1.4后,选择器就独立出来了,作为了一个开源的项目Sizzle,据说此选择器的性能远远超过其他框架的选择器。而Sizzle中两把利剑就是Sizzle.find和Sizzle.filter.今天先介绍第一把利剑Sizzle.find().

  
   1: Sizzle.find = function(expr, context, isXML){2: //此时传递进来的选择都是独立的选择字符串,没有层级关系 如“+” “~” “ ”“>”3: //set用来存储结果 match用来存储选择字符串分离的结果4:     var set, match;5: //如果选择字符串为空则返回的结果集也为空6:     if ( !expr ) {7:         return [];8:     }9: //order存储的是寻找匹配的顺序  order: [ "ID", "NAME", "TAG" ],10: //按此顺寻匹配11:     for ( var i = 0, l = Expr.order.length; i < l; i++ ) {12: //获取匹配类型13:         var type = Expr.order[i], match;14:         15:         if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {16: //leftMatch是存储各种匹配类型获取参数的正则表达式17: //如leftMatch["ID"]为(^(?:.|\r|\n)*?)#((?:[\w\u00c0-\uFFFF-]|\\.)+)(?![^\[]*\])(?![^\(]*\))18: //由此正则表达式可见match是匹配参数的的前缀如tr#5,match[1]就是tr,match[2]为519:             var left = match[1];20:             match.splice(1,1);21: //如果匹配类型字符串(# . TAG)前面没有注释字符‘\\’(说明此匹配类型字符串有效)22:             if ( left.substr( left.length - 1 ) !== "\\" ) {23: //将用来参数中用来转义的双斜杠去掉24:                 match[1] = (match[1] || "").replace(/\\/g, "");25: //Expr是一个对象,调用其find对象的相应匹配属性的寻找方法。那里会调用浏览器原生的获得元素的方法26: //例如Expr.find["ID"]的函数为27: //ID: function(match, context, isXML){28: //这里调用了浏览器原生的getElementById29: //            if ( typeof context.getElementById !== "undefined" && !isXML ) {30: //                var m = context.getElementById(match[1]);31: //                return m ? [m] : [];32: //           }33: //        }34:                 set = Expr.find[ type ]( match, context, isXML );35: //如果返回的结果集不为空则将匹配的字符串删去,并跳出循环(选择字符串中的其他部分在另一把利器filter会被用作对此结果集进行过滤的过滤参数)36:                 if ( set != null ) {37:                     expr = expr.replace( Expr.match[ type ], "" );38:                     break;39:                 }40:             }41:         }42:     }

 
其实Sizzle这把利器find还是比较简单的,filter则相对较难,但这里正则表达式的写法是很值得借鉴的

Sizzle选择器揭秘--Sizzle选择器相关推荐

  1. Sizzle选择器揭秘--Sizzle过滤器

    上面一篇文章说的Sizzle的利器之一find函数Sizzle选择器揭秘--Sizzle选择器 这篇介绍Sizzle的另一利器filter函数 1: Sizzle.filter = function( ...

  2. 深入学习jquery源码之jQuery的选择器引擎Sizzle(一)

    深入学习jquery源码之jQuery的选择器引擎Sizzle Sizzle是一个纯javascript CSS选择器引擎.jquery1.3开始使用sizzle,Sizzle一反传统采取了相反的Ri ...

  3. jquery选择器引擎Sizzle

    首先介绍一下什么是Sizzle: Sizzle是一个纯JavaScript CSS选择器引擎.jquery1.3开始使用sizzle,Sizzle一反传统采取了相反的Right To Left的查询匹 ...

  4. jQuery选择器探究:TAG选择器和CLASS选择器

    (jquery1.6.1版本)假设有一个html文档中存在多个<h1>标签元素,那么当我们敲入$("h1")后在jQuery内部将会执行怎样的逻辑呢? 分析jQuery ...

  5. 选择器优先级_CSS选择器优先级指北

    来源:大前端FE(gh_f26dd6c6cfbf)欢迎大家一起来学习前端,期待你加入~ 相信大部分人刚开始写 css 的时候应该碰到过这样的问题. 明明只改了一行样式,然后整个页面就变成了这样↓   ...

  6. CSS复合选择器(后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器)

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...

  7. css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)

    css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...

  8. CSS中的id选择器和class选择器简单介绍

    <!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...

  9. CSS继承选择器与包含选择器的比较

    作者:sagahu@163.com 日期:2011-12-21 CSS继承选择器与包含选择器的作用很像,其类似点主要有: 继承选择器的子孙元素可以继承到祖先元素的某些样式:而包含选择器的子元素可以得到 ...

最新文章

  1. typora背景变黑
  2. 基于MATLAB的数字图像K-L变换,基于DCT变换的图像编码方法研究
  3. Pytorch交叉熵损失函数torch.nn.functional as F
  4. 【新技术】不用开发者账号申请ios证书真机调试
  5. ZK textbox Constraint验证
  6. ajaxfileupload 跨域 (二级域名) 可行办法
  7. PHP递归复制文件夹的类
  8. WIX(20121031) 应用设置默认变量
  9. asp.net core AuthenticationMiddleware 在WebApi中的的使用
  10. 揭秘大流量场景下发布如「丝般顺滑」背后的原因
  11. django 1.8 官方文档翻译: 1-2-2 编写你的第一个Django应用,第2部分
  12. 阿里粗排技术体系与最新进展
  13. 京东抄袭源码;腾讯回应裁员;新 iPad Pro 十月发布 ​| 极客头条
  14. 深入理解 Java 中 protected 修饰符
  15. 如何快速搭建一个直播平台?
  16. scala异常处理、提取器(Extractor)、文件IO
  17. 德尔福ESR雷达测试
  18. steam游戏上架流程一:使用官方SDK上传游戏
  19. hybrid a* 和dwa 结合(自动泊车,倒车入库)
  20. 鲜花电商狼烟四起,花点时间的“悦己”生意还能香多久?

热门文章

  1. 微信小程序——【云音乐播放器】
  2. 解决【VS/VC】中文乱码问题-5种解决办法
  3. Flutter 打包iOS包出现 ld: bitcode bundle could not be generated because
  4. 百度人脸比对Demo
  5. php 自动关键词,php实现自动获取生成关键词功能
  6. JVM的三种常见GC:Minor GC、Major GC与Full GC
  7. 计算机网络中 89 个常见的概念
  8. MNIST是什么鬼?
  9. python儿童编程教育_2019儿童编程语言大全
  10. 基于Java实现的图片搜索系统