Sizzle词法解析

sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离。

•可能会应用到正则如下:

// 空白
var whitespace = "[\\x20\\t\\r\\n\\f]"; // 匹配\后任意字符,字母或数字或-,ascii值非\x00-\xa0范围内的字符
var characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+" var identifier = characterEncoding.replace( "w" , "w#" ) // 匹配关系符> + ~
var rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ) // 匹配=[非'非"]
var rattributeQuotes = new RegExp( "=" + whitespace + "*([^\\]'\"]*?)" + whitespace + "*\\]" , "g" )

•正则组合:

///^#((?:\\.|[\w-] | [^\x00-\xa0] ) +)/var ID = new RegExp("^#(" + characterEncoding + ")")

匹配ID,例如:$('#id')

var TAG =  new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" );

匹配标签,例如:$('input')

var Class = new RegExp( "^\\.(" + characterEncoding + ")" );

匹配class名,例如:$('.test')

attributes = "\\[" + whitespace + "*(" + characterEncoding + ")" + whitespace +
"*(?:([*^$|!~]?=)" + whitespace + "*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|(" + identifier + ")|)|)" + whitespace + "*\\]"
匹配属性选择器,例如:[arr^='val']
   捕获组1:characterEncoding :匹配例子中arr
   捕获组2:([*^$|!~]?=):匹配例子中^=
   捕获组3:['\"]:匹配例子中'
   捕获组4:(?:\\\\.|[^\\\\])*? 解释一下这个外层捕获\和后面的任意数量字符或非\字符,内层有?:是不捕获的,匹配例子中的val
   捕获组5:匹配identifier,匹配[id=#a]的情况
 
pseudos = ":(" + characterEncoding + ")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|" + attributes.replace( 3, 8 ) + ")*)|.*)\\)|)"  
匹配伪类表达式,例如li:nth-child(2n+1)
   捕获组1:characterEncoding :匹配例子中nth-child
   捕获组2:匹配例子中的2n+1
   捕获组3:匹配' or "
   捕获组4:匹配\和后面任何字符或非\字符
   捕获组5:匹配不再' or "内的\和后面任意字符或非\()[]字符或attributes

(五)JS学习笔记 - Sizzle选择器的更多相关文章

  1. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

  5. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  6. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  7. 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳

    <Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...

  8. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  9. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

随机推荐

  1. ueditor从excel粘贴过来的表格不显示问题

    这是设置表格边框可见的办法

  2. TTS异步+同步

    微软TTS使用说明 一.SAPI SDK的介绍 SAPI,全称是The Microsoft Speech API.就是微软的语音API.由Windows Speech SDK提供. Windows S ...

  3. nginx读书日志

    2016.12.20 nginx 功能特性: 既可以作为http服务器,也可以作为反向代理服务器或者邮件服务器 基本服务:处理静态文件,处理索引文件以及支持自动索引 nginx服务器中主要由proxy ...

  4. Swift—final关键字-b

    在类的定义中使用final关键字声明类.属性.方法和下标.final声明的类不能被继承,final声明的属性.方法和下标不能被重写. 下面看一个示例: final class Person { //声 ...

  5. PHP中的常量

    常量与变量不一样,一旦被定义就可以全局访问. 例如: <?php define('CONST_NAME','shiyingyan'); define('RESULT_OK',1); define ...

  6. android编程之悬浮窗体

    用过手机360和QQ手机管家等一些软件的朋友,会发现,在这些应用中,会出现一个悬浮窗体,例如QQ手机管家中打电话的场景: 这种窗体除了会显示外,还可以移动它的位置,并且一直显示.除了关闭当前程序外,窗 ...

  7. window.onscroll

    http://www.w3help.org/zh-cn/causes/SD9013 1.各浏览器对 document.document.body.document.documentElement 对象 ...

  8. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  9. yiic模块module使用

    模块是一个独立的软件单元,它包含 模型, 视图, 控制器 和其他支持的组件. 在许多方面上,模块看起来像一个 应用.主要的区别就是模块不能单独部署,它必须存在于一个应用里. 用户可以像他们访问普通应用 ...

  10. 对Primary-backup分布式数据库分布式一致性的猜想

    昨天读了paxos算法,心里对分布式一致性有一些想法:如果是我,应该怎么实现数据库集群的一致性呢? paxos算法本身并没有提到其应用,所以实际使用情况应该较复杂.而我平时接触到使用分布式一致性算法的 ...