關於jQuery參考執行個體2.0 用jQuery選擇元素

譯自jQuery Cookbook (O'Reilly 2009) Chapter 2 Selecting Elements with jQuery, 2.0 Introduction

jQuery的核心是它的選取器引擎，其作用是從文檔中通過名稱、屬性、狀態等將元素篩選出來。由於CSS的廣泛使用，在jQuery中採用CSS的選取器文法就成了很自然的選擇。在支援絕大多數CSS1-3規範中的選取器之外，jQuery還增加了很多自訂的選取器來根據一些特殊的狀態選擇元素；與此同時，我們還可以自己編寫選取器。

在文檔中定位某個元素或者某些元素的最簡單的方法，是使用jQuery封裝函數和CSS選取器，比如：

jQuery('#content p a');//選擇所有#content元素內的p元素中的a元素

在選擇好元素之後，就可以在這些元素上調用jQuery方法。比如，在所有選擇的連結元素上添加selected的class屬性：

jQuery('#content p a').addClass('selected');

jQuery提供了很多遍曆DOM樹的方法來協助選擇元素，比如next()，prev()，parent()等。這些方法接受一個選取器運算式作為其唯一的參數，從而對選擇到的元素集進行過濾。因此，除了jQuery(…)，CSS選取器還會在很多地方用到。

在構建選取器時，為了提升其效能，可以遵循一條法則：儘可能地簡化選取器的編寫。選取器字串越複雜，jQuery進行處理的時間也就越長。jQuery內部使用了瀏覽器原生的DOM方法來選擇元素，因此，直接用選取器來選擇元素僅僅是一種抽象封裝後的結果。直接使用選取器本身並無不妥，但是理解所寫代碼的執行效能這一點卻非常重要。以下是一個過度使用選取器的例子：

jQuery('body div#wrapper div#content');

更精確的定位並不意味著代碼的運行速度更快。上述選取器可以重寫為：

jQuery('#content');

與之前的例子相比，該代碼的作用相同，但卻節省了不少效能開銷。值得注意的是，有時我們可以通過指定選取器的上下文背景來進一步提升效能。