(五)JS学习笔记 - Sizzle选择器

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

时间: 2024-10-23 01:30:02

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

sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)

sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map) 这几天学习和查看了jQuery和Property这两个很流行的前端库的御用选择器组件Sizzle.js的源代码,收获还是相对多的!之前一直做使用Java语言开发,其丰富的组件类库使得开发效率那叫一个快呀!突然转来做JavaScript一时间还有点儿不适应(快半年了),不过自从看见那么多漂亮的网站和对JavaScript接触的越来越多,也发现了其中的一些乐趣.正如自己一直坚信的那样,编程语言仅仅是工具,重要的是编程思想!使用Jav

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

Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学习笔记(四)--- 与MySQL交互(felixge/node-mysql) Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识 Nodejs学习笔记(七)--- Node.js + Exp

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e

JS学习笔记-OO疑问之封装

封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 匿名函数 即没有名字的函数,其创建方式为 function(){...} 单独存在的匿名函数,无法运行,可通过赋值给变量调用或通过表达式自我执行来实现运行. 1.赋值给变量为一般的函数使用方式 var run = function(){ return '方法运行中'; }; alert(run()); 2.通过表达式自我执行 (function(a

每日js学习笔记2014.5.4

<script language="javascript">var mystring = "这是第一个正则表达式的例子";var myregex = new RegExp("这是"); //创建正则表达式if (myregex.test(mystring)) //test的功能是查找字符串中是否有匹配项,有则返回true,没有则返回false{ document.write ("找到了指定的模式");}else{