jQuery的$（本）與可變

Question

考慮：

var element = $('#element'); 

我不知道這是更快：

element.click(function(){ 
    element.dosomething() 
)} 

或者：

element.click(function(){ 
    $(this).dosomething() 
)} 

或者什麼關係呢？

Answer 1

速度可能會相同，但使用$（this）要好得多，因爲您不必擔心元素被重新分配給其他元素（或元素的值完全丟失）。另外，如果您爲一個類而不是特定元素重構和使用選擇器，該函數將適用於所有匹配的元素，而不僅僅是一個元素。

Answer 2

我寧願第二個。如果您想重構函數並將其重用爲另一個按鈕，它將更具可移植性。

Answer 3

由於$（this）導致函數調用，所以您的第一個示例在理論上更快，但可能不會太多。

Answer 4

第一個更快。第二個運行相同的選擇器兩次。也就是說，你將只使用第一種方法使用該代碼，這可能不是你大部分時間想要的。

在實踐中，使用像這樣一個規律：

$('stuff').click(function(){ 
    var $$ = $(this); 
    $$.dosomething(); 
    $$.dosomethingelse(); 
)} 

也就是說，除非你只使用一次選擇，它首先分配給一個變量。

Answer 5

那麼jQuery有它獨特的dom元素緩存（jQuery已經被觸摸了一次），所以實際上在大多數情況下這不會產生真正的區別。

雖然我並不真的相信這是你的情況，但jquery實際上會包裝這個元素，所以你不會真正運行任何類型的查詢兩次。

順便說一句，在某些情況下，這確實有所作爲（例如委派時）。

Answer 6

使用element。

如果element是一個匹配單個元素的jQuery集合，例如$( someId )，那麼就使用它。

如果選擇是爲了多個元素匹配，那麼element實際上是elements，元素的集合，因此，在這種情況下，你用你的$(this)單擊處理程序內趕上實際點擊的人。

的差被詮釋他下面的實施例說明：

1-處理程序單元件上

var table = $("#myTable"); 
table.click(function() { 
    // Same as $(this), except $(this) creates another 
    // wrapper on the same object (which isn't too expensive anyway) 
    table.doSomething(); 
}); 

2-處理器上的多個元素

var rows = $("#myTable > tbody > tr"); 
rows.click(function() { 
    // Here we have to use $(this) to affect ONLY the clicked row 
    $(this).doSomething(); 
}); 

3-處理器單個元件上，但要求多個子元素

var table = $("#myTable"); 
// "on" and "live" call handler for only child elements matching selector 
// (Even child elements that didn't exist when we added the handler, 
    as long as parent -table in this case- exists) 
table.on("click", "tbody > tr", function() { 
    // Here we have to use $(this) to affect ONLY the clicked row 
    $(this).doSomething(); 
}); 

我發現它確保（儘管工作量少，但差別很小），只是現有的包裝，表明我期待在這種情況下的單個元素，我只是與它合作。當我處理匹配元素集合的元素時，請使用$(this)。

Answer 7

這會更快：

element.click(function(){ 
    element.dosomething(); 
)} 

這將是最快的：

element.bind('click', element.dosomething); 

1. 元素緩存（並沒有改變，我認爲）
2. 使用綁定（ '點擊' ）直接不使用.click（）包裝
3. 如果element.dosomething是你想調用的函數，直接傳遞它wi額外呼叫

我假設element.dosomething()是正確的，也element不會改變。

這裏是工作的代碼示例：http://jsfiddle.net/xhS3b/

//<a href="#" id="element">click me</a> 

var element = $('#element'); 
element.dosomething = function() { 
    alert('did something'); 
    return false; 
} 
element.bind('click', element.dosomething);