は、jQueryオブジェクトとJavaScript変数

Question

の異なる使用シナリオ上の混乱私は、これら2つのコードブロック間の違いに混乱しています：

$("#someButton").click(function() { 
    var button = this; 
    $(button).attr('disabled', 'disabled'); 
} 

$("#someButton").click(function() { 
    var button = $(this); 
    $(button).attr('disabled', 'disabled'); 
} 

お知らせどのボタン変数店の違い。ただthisの代わりに$(this)をボタン変数に格納する点は何ですか？最後に、私はまだ$(button).jQueryMethod()を使用していますが、button.jQueryMethod()ではなく、それを操作しています。あなたはjqueryの二度作るbecuase

Answer 1

あなたは一度だけラップjQueryオブジェクトを使用しているとの違いは、あなたの例ではその重要ではありません。この問題は、JQueryオブジェクトを何度も使用する必要がある場合に、より適切になります。

$("#someButton").click(function() { 
    var button = this; 
    $(button).attr('disabled', 'disabled'); 
    $(button).someJQueryMethod(); 
    ... 
    $(button).someOtherJQueryMethod(); 
} 

この場合、オブジェクトを1回ラップして結果をキャッシュする方がよいでしょう。 $記号で始まる変数に結果をキャッシュして、ラップされたJQueryオブジェクトが含まれていることを示します。

$("#someButton").click(function() { 
    var $button = $(this); 
    $button.attr('disabled', 'disabled'); 
    $button.someJQueryMethod(); 
    ... 
    $button.someOtherJQueryMethod(); 
} 

このようにして、$()への呼び出しは1回だけ呼び出されます。これは、参照がループ内にある場合に特に重要になります。

Answer 2

$("#someButton").click(function() { 
    var button = $(this); 
    $(button).attr('disabled', 'disabled'); 
} 

は

冗長です！。

第2のケースで

$("#someButton").click(function() { 
    var button = $(this); 
    button .attr('disabled', 'disabled'); 
} 

Answer 3

、あなたはこれを行うことができます。

はサンプル1では

var $button = $(this); 

$button.attr('disabled', 'disabled'); 

Answer 4

、ボタンは次のとおりです。

button.attr('disabled', 'disabled'); 

$接頭辞付きのjQuery変数に名前を付けるのが一般的です通常のDOMオブジェクトは、クリックコールバックのため、thisはjQueryオブジェクトではなく、通常のDOMオブジェクトを指しているだけです。 thisで追加のjQuery操作を行う予定がない場合は、これは問題ありません。ただし、.attr()へのjQuery呼び出しを使用して次の行のボタンを無効にしています。あなたが必要となり、あなたが使用していないようです余分な変数を排除しても$(button)

Answer 5

のための余分なクエリ操作を削除することができますこの方法

$("#someButton").click(function() { 
    $(this).attr('disabled', 'disabled'); 
} 

：私はこのように書かれた第二のブロックを使用しますエレメント上でjQuery APIを使用する場合は$(this)を使用してください。あなたの例では、要素を取得しようとしているだけなので、両方のアプローチが機能します。

単純に要素を取得するので、両方の手法が機能します。

とき$(this)使用する方法：あなただけthisを使用することができた場合

var button = $(this).css({ "border" : "1px solid red" }); 

を：

var button = this.style.border = "1px solid red";