如何瞭解jQuery選擇器如何在幕後工作？

Question

例如，當我們使用$('div span')時，jQuery如何爲我們做這樣的搜索？

是否首先搜索span元素或div？

看來jQuery官方網站對這些東西沒有解釋;它只是告訴我們通過API可以使用哪些功能。

我想知道每個類型的jQuery選擇器是如何實現的，所以我可以選擇最好的選擇器來使用。

你知道我在哪裏可以得到這樣的信息嗎？

Answer 1

尋找最簡單的地方就是直接從源頭上讀取。從jquery站點下載未壓縮的源代碼，並從原始資源中讀取它執行的操作和順序。

http://jquery.com/download/

Answer 2

由於@Juhana曾評論說，如果你想知道具體的方法jQuery使用基於其選擇器來選擇對象，看看GitHub的庫：

https://github.com/jquery/jquery/

或者，查看在源代碼中可用的未壓縮的jQuery下載：

http://jquery.com/download/

如果你只是想知道什麼不同的選擇可供選擇，這裏的jQuery他們提供的名單：

http://api.jquery.com/category/selectors/

Answer 3

他們從右到左解析。

見http://csswizardry.com/2011/09/writing-efficient-css-selectors/和Why do browsers match CSS selectors from right to left?

Answer 4

從廣義上講，你需要知道：

1. jQuery的讀取選擇from right to left。
2. Using an exact ID is fastest，然後使用確切的標籤名稱，因爲它們使用優化的JavaScript本地方法。
3. 像:first-child這樣的原生CSS選擇器是faster than jQuery selectors就像:first。

您也可以閱讀official Sizzle documentation，但它沒有真正討論優化技術。

Answer 5

首先搜索span元素。它解析選擇爲：

1. 用的tagName =跨度
2. 經與祖先的任何元件的tagName = DIV

對於第一部分，它可以使用getElementsByTagName方法，找到所有span元素，那麼它必須循環遍歷每個的祖先以尋找div元素。