51

$(this)クラスを再選択する代わりに使用することが重要なのはなぜですか？

私は自分のコードで多くのアニメーションとCSSの編集を使用していますが、を使用することでそれを単純化できることを知ってい$(this)ます。

4

6 に答える 6

74

jQueryを介してDOMクエリを実行する$('class-name')と、その要素がDOMでアクティブに検索され、すべてのjQueryプロトタイプメソッドが添付された要素が返されます。

jQueryチェーンまたはイベント内にいる場合は、DOMクエリを再実行する必要はなく、コンテキストを使用できます$(this)。そのようです：

$('.class-name').on('click', function(evt) {
    $(this).hide(); // does not run a DOM query
    $('.class-name').hide() // runs a DOM query
});

$(this)最初に要求した要素を保持します。すべてのjQueryプロトタイプメソッドを再度アタッチしますが、DOMを再度検索する必要はありません。

いくつかの詳細情報：

jQueryセレクターを使用したWebパフォーマンス

もう存在しないウェブブログからの引用ですが、歴史のためにここに残しておきます。

私の意見では、jQueryのパフォーマンスに関する最良のヒントの1つは、jQueryの使用を最小限に抑えることです。つまり、jQueryとプレーンなol'JavaScriptの使用のバランスを見つけ、開始するのに適した場所は'this'です。多くの開発者は$（this）をコールバック内のハンマーとして排他的に使用し、これを忘れていますが、違いは明確です。

jQueryメソッドの匿名コールバック関数内にある場合、これは現在のDOM要素への参照です。$（this）はこれをjQueryオブジェクトに変換し、jQueryのメソッドを公開します。jQueryオブジェクトは、DOM要素の強化された配列にすぎません。

于 2012-09-18T16:53:32.817 に答える
15 
$(document).ready(function(){
   $('.somediv').click(function(){
   $(this).addClass('newDiv'); // this means the div which is clicked
   });                         // so instead of using a selector again $('.somediv');
});                           // you use $(this) which much better and neater:=)
于 2012-09-18T16:58:16.010 に答える
10

このコードを見てください：

HTML:

<div class="multiple-elements" data-bgcol="red"></div>
<div class="multiple-elements" data-bgcol="blue"></div>

JS:

$('.multiple-elements').each(
    function(index, element) {
        $(this).css('background-color', $(this).data('bgcol')); // Get value of HTML attribute data-bgcol="" and set it as CSS color
    }
);

thisDOM エンジンが作業している、または参照している現在の要素を参照します。

もう一つの例：

<a href="#" onclick="$(this).css('display', 'none')">Hide me!</a>

あなたが今理解していることを願っています。キーワードは、オブジェクト指向システム、またはこの場合のように要素this指向システムを扱っているときに発生します:)

于 2012-09-18T17:00:23.597 に答える
4

を使用$(this)すると、検索に使用しているクラス/属性が何であれ、Web ページのコンテンツ全体で何度も検索する必要がないため、パフォーマンスが向上します。

于 2012-09-18T17:02:52.647 に答える