1. ホーム
  2. jquery

[解決済み] jQuery $(this) キーワード

2022-03-01 20:56:12

質問

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

私のコードでは、アニメートとCSSの編集を多用していますが、それを簡略化するために $(this) .

解決方法は?

のように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と普通のJavaScriptをバランスよく使うということで、その手始めが「this」です。多くの開発者は、コールバック内のハンマーとして$(this)のみを使用し、このことを忘れていますが、その差は歴然としています。

jQueryメソッドの無名コールバック関数内では、これは 現在のDOM要素への参照。これを$(this)でjQuery オブジェクトを作成し、jQuery のメソッドを公開します。jQueryオブジェクトは は、DOM 要素の配列が強化されたものです。