ホームページ > ウェブフロントエンド > jsチュートリアル > 「this」は jQuery でどのように機能しますか?また、さまざまな使用方法は何ですか?

「this」は jQuery でどのように機能しますか?また、さまざまな使用方法は何ですか?

Linda Hamilton
リリース: 2024-10-26 10:14:30
オリジナル
263 人が閲覧しました

  How Does

jQuery の "this" の意味と使用法を理解する

JavaScript の "this" キーワードは、柔軟な処理を可能にする強力な概念です。オブジェクト指向プログラミング。 jQuery では、「this」は、イベント コールバックなど、特定の関数呼び出しのターゲットとして機能する DOM 要素を参照するためによく使用されます。

jQuery イベント コールバックの「this」

jQuery イベント コールバック内では、「this」は通常、イベントをトリガーした DOM 要素を表します。これにより、スタイルの設定や非表示など、要素の属性を簡単に操作できるようになります。

$("div").click(function() {
    this.style.color = "red";
    $(this).hide();
});
ログイン後にコピー

jQuery 関数の「this」

さまざまな jQuery 関数DOM 要素の反復処理では、関数を引数として受け取ることもできます。これらの関数内では、「this」も現在の DOM 要素を表します。たとえば、「html()」関数を使用すると、一致する各要素のコンテンツを設定できます:

$("#foo div").html(function() {
    return this.className;
});
ログイン後にコピー

jQuery の ".each()" メソッドの「this」

jQuery の「.each()」メソッドを使用すると、要素の配列のループが可能になります。 「.each()」に提供されるコールバック関数内で、「this」は配列内の現在の要素を参照します。

jQuery.each(["one", "two", "three"], function() {
    alert(this);
});
ログイン後にコピー

JavaScript での「this」の一般的な理解

一般に、JavaScript の「this」は、関数が呼び出されるオブジェクトを指します。これは、関数が定義されている場所ではなく、関数が呼び出されるコンテキストによって決まります。

通常、「this」はオブジェクトのプロパティとして関数を呼び出すことによって設定されます:

var obj = {
    firstName: "Fred",
    foo: function() {
        alert(this.firstName);
    }
};
obj.foo(); // alerts "Fred"
ログイン後にコピー

「this」と Strict モード

ES5 の strict モードでは、「this」はオブジェクトだけでなく、任意の値を持つことができます。 「this」が明示的に設定されていない場合、デフォルトでグローバル オブジェクト (ブラウザの「ウィンドウ」オブジェクト) になります。

「this」を設定するための追加メソッド

JavaScript では、「this」の値を設定するためのメソッドが他に 2 つあります:

  • .call(): 「this」を最初の引数に設定し、任意の値を渡します。関数への残りの引数。
  • .apply(): ".call()" に似ていますが、引数を配列として受け入れます。

Loose モード vs. Strict モード

loose モードと strict モードでは、「this」の動作が異なります。ルーズ モードでは、「this」が明示的に設定されていない場合、デフォルトでグローバル オブジェクトが使用されます。厳密モードでは、「this」には任意の値を指定でき、明示的に設定しないと「未定義」になります。

以上が「this」は jQuery でどのように機能しますか?また、さまざまな使用方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート