jQuery各種獲取元素的方式效率比較

/**這種方式最快，因爲它直接使用原生的getElementById,ByTagName 和 querySelectorAll();*/
$('#box').find('p'); 
/**jQuery會自動把這條語句轉換爲$('#box').find('p')，效率較最快的方式慢了5%-10%*/
$('p','#box'); 
/**
 *這條語句在jQuery內部會使用$.sibling()和javascript的nextSiblint（）方法，
 *一個個的遍歷結點，會比最快的方式慢50%左右
 */
$('#box').children('p'); 
/**
 *jQuery內部使用的Sizzle引擎，處理各種選擇器。Sizzle引擎的選擇順序是從右到左，
 *所以這條語句的選擇順序是先選擇p，然後再一個個的過濾出父元素#box，
 *這導致他比最快的方式慢了大約70%
 */
$('#box>p');
/**
 *這條語句與上面那一條是同樣的情況，但是上一條選擇了直接的子元素，這一條可以選擇多級子元素
 *所以它的速度更加的慢，大約比最快的方式慢77%
 */
$('#box p');
/**
 *jQuery內部會將這種方式轉換爲$('#box').find('p'),比最快的方式慢了大約23%
 */
$('p',$('#box'));

    綜上所述，最快的方式是find方式，最慢的是$('#box p')這種高級選擇器方式，如果一開始可以對$('#box')進行賦值的話，效率會進一步的增加。

var box = $('#box');
var p = box.find('p');

    

    我們應該推薦使用哪種方案呢？其實，使用哪種都差不多。這裏，我們推薦使用jQuery 提供的方法。 因爲不但方法的速度比高級選擇器運行的更快， 並且它的靈活性和擴展要高於高級選擇器。使用“+”或“~”從字面上沒有 next 和 nextAll 更加語義化，更加清晰，jQuery 的方法更加豐富，提供了相對的 prev 和 prevAll。畢竟 jQuery 是編程語言，需要能夠靈活的拆分和組合選擇器，而使用 CSS 模式過於死板。所以，如果 jQuery 提供了獨立的方法來代替某些選擇器的功能，我們還是推薦優先使用獨立的方法。

    學習李彥恢老師的jQuery教程筆記