「$(this)」と「this」の違いは何ですか?

StackOverflow https://stackoverflow.com/questions/1051782

  •  20-08-2019
  •  | 
  •  

質問

私は現在、このチュートリアルに取り組んでいます。 jQuery の入門

以下の 2 つの例の場合:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

最初の例では、次のように使用していることに注意してください。 $(this) それぞれの中にテキストを追加します li 要素。2 番目の例では、 this フォームをリセットするときに直接。

$(this) よりもはるかに頻繁に使用されるようです this.

私の推測では、最初の例では、 $() それぞれ変換しています li 要素を jQuery オブジェクトに組み込みます。 append() 関数ですが、2 番目の例では reset() フォーム上で直接呼び出すことができます。

基本的に必要なのは $() 特別な jQuery 専用関数の場合。

これは正しいです？

役に立ちましたか？

解決

あなたはjQueryのを使用しているとき、

はいあなただけの$()必要です。あなたはDOMの物事を行うにはjQueryの助けが必要な場合だけ、このことを覚えておいてます。

$(this)[0] === this

基本的にあなたはjQueryのを要素の集合を取り戻すたびに jQueryオブジェクトに。あなたが唯一の結果を知っている場合は、それが最初の要素になるだろう。

$("#myDiv")[0] === document.getElementById("myDiv");

のように...

他のヒント

$() jQueryのコンストラクタ関数である。

this呼び出しのDOM要素への参照である。

基本的に、$(this)で、あなただけ渡しているので<=>パラメータとして使用すると、jQueryのメソッドや関数を呼び出すことができるように<=>ます。

はい、あなたはjQueryの機能のために$(this)必要がありますが、あなたはjQueryのを使用していない要素の基本的なJavaScriptのメソッドにアクセスするときに、あなただけのthis使用することができます。

jQuery使用する場合は、

、通常$(this)使用することをお勧めします。あなたは（あなたが学び、知っておくべき）の違いを知っていればしかし、時にはそれがより便利でちょうどthisを使用して高速です。たとえばます：

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

タグよりも簡単かつ純粋です 
$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

this 要素です、 $(this) その要素で構築された jQuery オブジェクトです

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

より深い見方

thisMDN 実行コンテキストに含まれています

スコープは現在のものを指します。 実行コンテキストECMA. 。理解するために this, JavaScript での実行コンテキストの動作方法を理解することが重要です。

実行コンテキストがこれをバインドします

コントロールが実行コンテキストに入ると (コードはそのスコープで実行されます)、変数の環境がセットアップされます (字句環境と変数環境 - 基本的に、これにより、既にアクセス可能な変数が入力される領域と、アクセス可能なローカル変数の領域がセットアップされます)保存されています)、およびバインディング this が発生します。

jQueryはこれをバインドします

実行コンテキストは論理スタックを形成します。その結果、スタックのより深いコンテキストは前の変数にアクセスできるようになりますが、そのバインディングは変更されている可能性があります。 jQuery がコールバック関数を呼び出すたびに、このバインディングが変更されます。 を使用して applyMDN.

callback.apply( obj[ i ] )//where obj[i] is the current element

電話をかけた結果 apply それは？ jQuery コールバック関数の内部、 this 現在の要素を参照します コールバック関数によって使用されます。

たとえば、 .each, 、一般的に使用されるコールバック関数により、 .each(function(index,element){/*scope*/}). 。その範囲では、 this == element それは本当です。

jQuery コールバックは、apply 関数を使用して、呼び出される関数を現在の要素にバインドします。この要素は、jQuery オブジェクトの要素配列から取得されます。構築された各 jQuery オブジェクトには、 セレクタjQuery API jQuery オブジェクトをインスタンス化するために使用されました。

$(selector) jQuery 関数を呼び出します (覚えておいてください) $ への参照です jQuery, 、コード: window.jQuery = window.$ = jQuery;）。内部的には、jQuery 関数は関数オブジェクトをインスタンス化します。したがって、すぐには明らかではないかもしれませんが、次のように使用します。 $() 内部で使用する new jQuery(). 。この jQuery オブジェクトの構築の一部は、セレクターの一致をすべて検索することです。コンストラクターは HTML 文字列も受け入れます と要素. 通過するとき this jQuery コンストラクターに、構築される jQuery オブジェクトの現在の要素を渡します。. 。jQuery オブジェクトには、セレクターに一致する DOM 要素 (または、次の場合は単一の要素) の配列のような構造が含まれます。 this).

jQuery オブジェクトが構築されると、jQuery API が公開されます。jQuery API 関数が呼び出されると、この配列のような構造を内部的に反復処理します。配列内の各項目に対して、API のコールバック関数を呼び出し、コールバックの関数をバインドします。 this 現在の要素に。この呼び出しは、上記のコード スニペットで確認できます。 obj は配列のような構造であり、 i 現在の要素の配列内の位置に使用される反復子です。

うん、$(this)使用することによって、あなたは、オブジェクトのためのjQueryの機能を有効に。ただthis使用することにより、それだけで、一般的なJavaScriptの機能を備えています。

this JavaScriptのオブジェクトを参照し$(this) jQueryを使ってカプセル化するために使用されます。

の例=> の

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top