「$（this）」と「this」の違いは何ですか？

私は現在、このチュートリアルを進めています：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要素をappend()関数を理解するjQueryオブジェクトに変換するのに対し、2番目の例reset()ではフォームで直接呼び出すことができます。

基本的に$()、特別なjQuery専用の関数が必要です。

これは正しいです？

はい、$()jQueryを使用している場合にのみ必要です。jQueryがDOMを実行するのを助けたい場合は、これを覚えておいてください。

$(this)[0] === this

基本的に、要素のセットを取得するたびに、jQueryはそれをjQueryオブジェクトに変換します。結果が1つしかないことがわかっている場合は、最初の要素になります。

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

等々...

$() jQueryコンストラクター関数です。

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

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

はい、$(this)jQuery関数が必要ですが、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);
});

より深く見える

this^MDNは実行コンテキストに含まれています

スコープは、現在の実行コンテキスト^{ECMAを参照し}ます。を理解thisするには、JavaScriptで実行コンテキストがどのように動作するかを理解することが重要です。

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

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

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

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

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オブジェクトのインスタンス化に使用されたセレクター^{jQuery APIに}一致する要素の配列が含まれています。

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

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

ええ、を使用$(this)して、オブジェクトのjQuery機能を有効にしました。を使用thisするだけで、汎用のJavaScript機能のみが提供されます。

thisjavascriptオブジェクトを参照し、$(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')