2009-06-02 108 views
6

最近,我一直在努力加速性能這樣一個jQuery的問題(​​有時是與可維護性幫助)關於變量和選擇

var objectToReference = $('div .complicated #selector ul:last'); 

那麼,是什麼objectToReference真正持有?有時候事情已經讓我感到困擾,所以我已經回到使用完整的選擇器,它已經工作。

如此做變量保持一個參考,指針等(我不知道這些術語的確切定義)

感謝

回答

20

許多人在創建像這樣的變量時使用的最佳做法是將其命名爲$,以表明它是一個jquery對象。所以你可以命名變量$ o,並且可以直接調用其他jQuery鏈函數,而不必在變量周圍放置$()。

$o.hide(); 

這是開始與你操縱的區域周圍的元素,以避免搜索整個文檔是個好主意。例如,要獲取文檔的單節內的所有鏈接(無需搜索整個文檔):

var $o = $('#mysection'); 
var $links = $('a', $o); // equiv to $o.find('a') 

最後,它絕不會傷害傳遞一個jQuery對象背透的jQuery:

$o === $($o) 

這有很好的副作用 - 你可以編寫接受任何以下作爲參數的功能:一個選擇,一個元素,一個jQuery對象:

function myFunc(e) { 
    var $e = $(e); 
} 
// All of the following will work: 
myFunc('#mysection'); 
myFunc(document.getElementById('mysection')); 
myFunc($('#mysection a')); 
+2

OH NOES!現在我的JS看起來像一個Perl或PHP。 好提示tho:P – 2009-06-02 03:55:20

3

返回值jQuery selector是jQuery元素的數組。如果選擇器沒有找到任何匹配,則它包含一個包含0個元素的數組。

數組中的每個元素基本上都是對HTML文檔中匹配的DOM元素的引用。這是允許您根據需要遍歷和操作它們的。

+2

從技術上講,不是一個數組,而是一個給定幾個類似數組的屬性的對象。 – Nosredna 2009-06-02 14:51:03

1

它包含對返回的jQuery對象的引用。對該對象的任何更改都會將底層DOM元素和所有其他引用更改爲相同的元素。

$('div .complicated #selector ul:last') 

你的變量objectToReference將是您可以執行的jQuery操作jQuery對象。另外,即使你不需要,也可以使用objectToReference創建一個新的jQuery對象,它不應該強加任何性能限制,因爲它應該只返回一個對自身的引用,而不是對該元素進行重新搜索。

var objectToReference = $('div .complicated #selector ul:last'); 
var copyOfObject = $(objectToReference); 

您可以嘗試引用objectToReference的DOM屬性遇到了問題。如果你想獲得在由jQuery選擇返回你的objectToReference的基本DOM元素,你可以這樣做:

var objectToReference = $('div .complicated #selector ul:last'); 
var domOfObject = objectToReference.get(0); 

或可選,你能做到這一點,它做同樣在1號線:

var domObjectToReference= $('div .complicated #selector ul:last').get(0); 

同樣,你可以使用domObjectToReference在jQuery的構造函數來創建另一個引用該對象:

var objectToReference2 = $(domObjectToReference); 

所有這些例子商店裁判的參與DOM元素。如果您修改其中一個參考的值,它們將全部被修改/更新。