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 p#wrapper p#content');更精確的定位並不意味著代碼的運行速度更快。上述選擇器可以重寫為:

jQuery('#content');與之前的例子相比,該代碼的作用相同,但卻節省瞭不少性能開銷。值得註意的是,有時我們可以通過指定選擇器的上下文背景來進一步提升性能。

 

發佈留言