重用jQuery選定元素的最有效方法

我可以想象基於理論的正確答案，但我只是在尋找一些確認。我想知道重用jQuery選擇元素的最有效方法是什麼。例如：重用jQuery選定元素的最有效方法

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div');

與

myDiv = $('#my_div'); 
myDiv.css('background','red'); 
//some other code 
myDiv.attr('name','Red Div');

我認爲第二個例子是更有效，因爲沒有#my_div元素得到發現不止一次。那是對的嗎？

同樣，首先將$（this）保存在變量中，比如'obj'，然後重複使用'obj'而不是使用$（this）反覆更有效？在這種情況下，jQuery並沒有被迫一遍又一遍地查找元素，但是它被迫將它轉換爲一個jQuery對象[$（this）]。所以作爲一般的經驗法則，如果一個jQuery對象總是被多次使用，它應該存儲在一個變量中嗎？

來源

2011-03-28 maxedison

是。不要忘了使用'var'。 – kapa 2011-03-28 16:07:31

我也喜歡用$符號來啓動變量名，以表明它是一個jQuery對象。因此，而不是myDiv，我會使用$ myDiv。 – 2011-03-28 16:09:15

可能的重複：http://stackoverflow.com/questions/4654558/is-referencing-a-selector-faster-in-jquery-than-actually-calling-the-selector-if/4654564#4654564 – amosrivera 2011-03-28 16:22:46

如果你使用jQuery選擇器（like $('#element')），那麼是的，你應該總是存儲你的結果。

如果您使用的是對象並將其封裝在jQuery中（如$(this)），則不需要，因爲jQuery不需要再次搜索該元素。

來源

2011-03-28 16:06:13 wildcard

不確定你的意思。在@ Edwin的例子中，如果他想要在元素上使用jquery方法，那麼'var $ this = $（this）;'這一行是必需的。在一個事件中，hander'this'是對DOM元素的引用，而不是jquery對象。 – johnhunter 2011-03-28 16:58:58

當然，要使用jQuery方法，您需要在jQuery函數中包裝對象。但我的意思是沒有必要存儲這樣的包裝（比如'var obj = $（this）'），因爲它幾乎不影響性能。 – wildcard 2011-03-28 17:02:33

啊是的。感謝您的澄清:) – johnhunter 2011-03-28 17:05:15

您應該編寫代碼，以便限制DOM遍歷的數量。

當你寫這樣的事：

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div');

您發現#my_div兩次，這是低效的。

您可以通過分配選擇的結果，提高本（即var x = $('.something')）和操作變量x，或者您也可以鏈你的方法調用是這樣的：

$('#my_div').css('background','red').attr('name','Red Div');

你會看到上面的代碼使用了很多，因爲你找到了一次元素。 css()方法將應用CSS樣式並返回$('#my_div')的實際結果，因此您可以調用另一種方法，在此情況下爲attr()。

我處理重新使用選擇器的首選方法是將它們存儲爲一個變量，並將我的東西封裝在一個閉包中。

來源

2011-03-28 16:05:35 wsanville

是的，我知道鏈接。這就是爲什麼我在「//一些其他代碼」評論中暗示兩次之間有事情需要引用#my_div，從而使鏈接不是一個選項。對不起，如果不明確。 – maxedison 2011-03-30 12:51:51

這也適用於將jQuery函數應用於事件處理程序中返回的元素。儘量避免使用$（...）多次，因爲這很慢。相反，創建一個包含$（...）結果的變量。好的做法是用$來啓動變量，該變量提供了關於變量內部的jQuery對象的提示。

$('a').click(function(){ 
    var $this = $(this); 
    $this.addClass("clicked"); 
    $this.attr("clicked", true); 
});

來源

2011-03-28 16:10:46

個人而言，我真的很討厭這種做法（它使我的代碼看起來像perl），但這是一個偏好問題。 – wildcard 2011-03-28 16:13:01

+1我使用'$ me'來避免'this'，'$（this）'和'$ this'之間的誤讀。個人喜好。 – kapa 2011-03-28 16:14:19

在我的電腦上，在Chrome上，調用$（）來包裝對象可以每秒完成260萬次，因此存儲$（this）的結果似乎不值得費心。 http://jsperf.com/overhead-of-wrapping-with-jquery – mhenry1384 2014-11-26 20:14:35

我發現的一件事通常被忽略的只是jQuery鏈的強大程度。它可能不是那麼明顯，但是由於jQuery在一個鏈中緩存了你的包裝元素，你可以修改元素，進入一個更具體的子集，修改，然後返回到一個通用的超集，而沒有太多的開銷。

我希望類似（原諒爲例）

$('#myDiv') 
    .addClass('processing') 
    .find('#myInput') 
    .hide('slow') 
    .end() 
    .removeClass('processing') 
    ;

得到更好的性能代價甚至比

var $myDiv = $('#myDiv').addClass('processing'); 
var $myInput = $('#myDiv #myInput').hide('slow'); 
    $myDiv.removeClass('processing');

來源

2011-03-28 16:20:17

你是這裏唯一的健談者。 +1 – simplyharsh 2012-03-09 20:44:04

重用jQuery選定元素的最有效方法

回答

相關問題