如何解析復雜的選擇器？
div > div.Aaron input[name=ttt]
組合后的意思大概就是：
1. 選擇所有div節點
2. 選擇div的子元素之后的所有 <div>并且class="Aaron" 的所有元素
3. 之后選擇 div.Aaron元素內部的所有input并且屬性[name=ttt]的元素
就針對這個簡單的結構，描述出整個解析的流程
我們用組合語句，在高級瀏覽器上jquery都是通過querySelectorAll處理的，所以我們討論的都是在低版本上的實現，偽類選擇器，XML要放到最后，本文暫不涉及這方便的處理。
需要用到的幾個知識點:
1: CSS選擇器的位置關系 2: CSS的瀏覽器實現的基本接口 3: CSS選擇器從右到左掃描匹配
CSS選擇器的位置關系
其實不難發現，一個節點跟另一個節點有以下幾種關系：
祖宗和后代 父親和兒子 臨近兄弟 普通兄弟
在CSS選擇器里邊分別是用：空格、>、+、~。
（其實還有一種關系：div.Aaron，中間沒有空格表示了選取一個class為Aaron的div節點）
<div id="grandfather"> <div id="father"> <div id="child1"></div> <div id="child2"></div> <div id="child3"></div> </div> </div>
爺爺grandfather與孫子child1屬于祖宗與后代關系（空格表達）
父親father與兒子child1屬于父子關系，也算是祖先與后代關系（>表達）
哥哥child1與弟弟child2屬于臨近兄弟關系（+表達）
哥哥child1與弟弟child2，弟弟child3都屬于普通兄弟關系（~表達）
在Sizzle里有一個對象是記錄跟選擇器相關的屬性以及操作：Expr。它有以下屬性：
relative = {
">": { dir: "parentNode", first: true },
" ": { dir: "parentNode" },
"+": { dir: "previousSibling", first: true },
"~": { dir: "previousSibling" }
}
所以在Expr.relative里邊定義了一個first屬性，用來標識兩個節點的“緊密”程度，例如父子關系和臨近兄弟關系就是緊密的。在創建位置匹配器時，會根據first屬性來匹配合適的節點
CSS的瀏覽器實現的基本接口
除去querySelector,querySelectorAll
HTML文檔一共有這么四個API：
1、getElementById，上下文只能是HTML文檔。
2、getElementsByName，上下文只能是HTML文檔。
3、getElementsByTagName，上下文可以是HTML文檔，XML文檔及元素節點。
4、getElementsByClassName，上下文可以是HTML文檔及元素節點。IE8還沒有支持。
所以要兼容的話sizzle最終只會有三種完全靠譜的可用
Expr.find = {
'ID' : context.getElementById,
'CLASS' : context.getElementsByClassName,
'TAG' : context.getElementsByTagName
}
所以最終總的原理：
1、支持高級API 直接調用querySelectorAll
2、降級通過sizzle處理，那么內部會有一個規則把選擇器分組groups，然后通過從右邊往左邊查找，加入編譯函數的方式節約重復查找的性能問題
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報