解析jquery的sizzle选择器（一）

太过爱你忘了你带给我的痛 2021-12-05 18:01 241阅读 0赞

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

--------------------

可以先说一下，

$.与$().的区别。

\*\*

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

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

就看上面的代码看不出来什么。  
![在这里插入图片描述][20190717144049810.png]  
我加上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>

![在这里插入图片描述][20190717144153638.png]  
这样看，就很明显了。它这样像加粗的样式，我并没有用$来写。

--------------------

很不要脸的复制了：**重点看 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的正则表达式汇总][jquery]

[jQuery_Sizzle]: https://blog.csdn.net/jsrookie/article/details/83705681
[jquery_Sizzle]: /images/20211205/7338a1206d2f4770ad42310a3ecd7611.png
[20190717144049810.png]: /images/20211205/cd06d3167ba045b6bc2d4c2415ed68fd.png
[20190717144153638.png]: /images/20211205/46133c4cb230414ebda1ad48e4bd7e29.png
[jquery]: https://blog.csdn.net/warhin/article/details/51174388