解析jquery的sizzle选择器（一）

一看到sizzle，我很茫然。。。。。。
首先，整理一下，在知乎上看到的。
来自Jeffreyzhang：切割Selector–>查找Selector–>过滤Selector(循环)–>得到Result。
暂时看到就这个。
下面讲讲其他来源：初探jQuery的Sizzle选择器
这个文章讲的可以。扔出来一张图，我现在也不明白。

可以先说一下，

$.与$().的区别。

$ 是一个jquery的对象，平时使用方法是引入一个jquery的文件即可。同时，它的功能和作用与jquery一样。
同时，我们还可以用jquery“备胎”，这样的语法来使用。代码如下：
$(). 是可以是可以有参数的，获取元素。平时我们做选择器的时候就是用到这个了。

<div ><span id="">我的div盒子中的一个span，我是行内元素</span></div><script type="text/javascript">$('div>span').css('background','#ff00ff');</script>

就看上面的代码看不出来什么。

我加上jquery来做一个font-weight:bold的：

<div ><span id="">我的div盒子中的一个span，我是行内元素</span></div><script type="text/javascript">$('div>span').css('background','#ff00ff');jQuery('div>span').css('fontWeight','bold')</script>

这样看，就很明显了。它这样像加粗的样式，我并没有用$来写。

很不要脸的复制了：重点看 string 类型的处理，因为只有它才可以触发Sizzle。
当进入Sizzle时，一般情况下会配备三参：所要匹配的选择符，上下文，匹配的结果集。调用正则对传入的selector做一次”预匹配”.

 var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,

上面一串正则，星星点点，都怪我正则没有学。

一般选择器的匹配模式（包括jq1.2之前），都是一个顺序的思维方式，在需要递进式匹配时，比如$(‘div span’)
这样的匹配时，执行的操作都是先匹配页面中div然后再匹配它的节点下的span标签，之后返回结果。

Sizzle则采取了相反Right To
Left的实现方式，先搜寻页面中所有的span标签，再其后的操作中才去判断它的父节点（包括父节点以上）是否为div，是则压入数组，否则pass，进入下一判断，最后返回该操作序列。

看到sizzle的查询规则，记得和之前的相反了。

之前的哦们查找div>p是按照下面的这个步骤去找的：

1.先查找页面上所有的div

2.循环所有的div，查找每个div下的p

3.合并结果

Sizzle用了截然相反的步骤：

1.先查找页面上所有的p

2.循环所有的p，查找每个p的父元素
1.如果不是div，遍历上一层。
2.如果已经是顶层，排除此p。
3.如果是div，则保存此p元素。

所有的选择器都可以这样解析吗？

不是，采用right -> left的顺序是有前提条件的：没有位置关系的约束。

<div> <p id="p1">p1content </p><p id="p2">p2content </p>
</div>
<div> <p id="p3">p3content </p><p id="p4">p4content</p></div>

对于选择器：$(“div p:first”)只会返回["#p1"]

而$(“div p:first-child”)则返回["#p1", “#p3”]

：此处明显看到选择的元素不一样。如果你看过了jquery的样式篇里面，讲有选择器的篇章。你就会知道：

first是基本筛选选择器（只会找到所有的第一个元素就不会继续找了）。
first-child是子元素筛选选择器（会把所有元素中的父元素的第一个子元素找到，所以返回的找到的元素有可能不止一个）。
两者的区别在于位置filter的结果依赖于它前面的selector解析的结果，而其它 filter，只依赖于当前元素本身，就可以判断它是否满足filter。

那Sizzle是通过什么来判定进入哪一个流程呢

，答案是origPOS的正则匹配,origPos指向了Expr中match对象的POS属性,而POS中存储了五花八门的位置类约束，
jquery的正则表达式汇总