jquery父系後代選擇器

Question

爲什麼1比2快？

1. $('#p1').find('span');
2. $('#p1 span');

Answer 1

在jQuery 1.4中，檢查選擇器是否是id選擇器（如#p1）。

• 如果確實如此，調用document.getElementId(...)並將結果包裝在jQuery實用程序對象中並返回。
• 如果除此之外的任何東西，jQuery調用Sizzle，然後它會執行任何操作來查找元素。而從源頭來看，這是非常不平凡的東西。

Answer 2

，最好的辦法是測試！

從這個簡單的測試：

• 內容 - ​<p id="p1"><span>Test</span></p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
• 循環100,000次

• 版本：jQuery的1.4.2

• $('#p1').find('span');：2601ms

• $('#p1 span');：1998ms

看起來，在這種情況下單個選擇器更快，因爲你沒有通過jQuery進行多次調用，這是有道理的。

Give it a try here, look at your console。

---

在CAE你介紹jQuery 1.3.2這裏的那些結果：

• $('#p1').find('span');：3225ms
• $('#p1 span');：2082ms

Try it out with 1.3.2 here。

Answer 3

就你而言，＃1可能比＃2更快，但取決於有多少迭代以及要搜索多少個元素，＃2在其他情況下可能比＃1更快。

例如：我猜如果你在#p1中有3 span元素而沒有其他元素，那麼＃1會比＃2更快，因爲find並沒有試圖做盡可能多的CSS匹配。但是，如果您有1000 span元素以及#p1中的2000個其他元素，我會下注＃2會更快，因爲它不必遍歷每個元素兩次。