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. css background-position:x% y%

    规则1: background-position:xpx ypx; 为正值时:背景图片的左上顶点朝右下移动直至距离div的左上顶点为xpx ypx: 规则2: background-position: ...

  2. linux定时任务crond那些事!

    1.定时任务crond介绍 1.1 crond是什么 crond是linux系统中用来定期执行命令或指定程序任务的一种服务或软件. 特殊需求:(秒级别)crond服务就无法搞定了,一般工作中写脚本守护 ...

  3. Jquery获取背景图片src路径

    例如获取body的背景: Jquery代码如下: var back = $('body').css('backgroundImage'); back.substring(start,end); //截 ...

  4. C程序设计语言练习题1-18

    练习1-18 编写一个程序,删除每个输入行末尾的空格及制表符,并删除完全是空格的行. 代码如下: #include <stdio.h> // 包含标准库的信息. #define MAXLI ...

  5. PHP浮点数的一个常见问题的解答

    作者: Laruence 本文地址: http://www.laruence.com/2013/03/26/2884.html 转载请注明出处 关于PHP的浮点数, 我之前写过一篇文章: 关于PHP浮 ...

  6. C# 文件读写异常“正由另一进程使用,因此该进程无法访问该文件”

    最近在对文件进行读写操作时,利用using的方法可还是遇到了异常"文件正由另一进程使用,因此该进程无法访问该文件": public bool WriteUserInfo(strin ...

  7. toast组件较为完美版本

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  8. 使用john破解ubuntu(linux)9.10密码

    Title:使用john破解ubuntu(linux)9.10密码 --2011-11-23 15:00 ubuntu 9.10的账户密码加密方式改用sha512了,默认的john是破不了的,还好官方 ...

  9. wifi10db定向天线制作及应注意的问题

    2.4GHZ本身就是高频要求制作精度高,如果您动手能力差的话还是不要做的好许多网友看到网上的制作资料就急不可耐的去找材料,然后加班加点的制作.等做出了天线发现效果不怎么样,或出了这样和那样的问题,才肯 ...

  10. Android listview局部刷新和模拟应用下载(zhu)

    在android开发中,listview是比较常用的一个组件,在listview的数据需要更新的时候,一般会用notifyDataSetChanged()这个函数,但是它会更新listview中所有可 ...