Was ist der Unterschied zwischen '$ (this)' und 'this'?

Ich arbeite gerade an diesem Tutorial: Erste Schritte mit jQuery

Für die beiden folgenden Beispiele:

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

Beachten Sie, dass im ersten Beispiel $(this)Text in jedes liElement eingefügt wird . Im zweiten Beispiel verwenden wir thisdirekt beim Zurücksetzen des Formulars.

$(this)scheint viel häufiger verwendet zu werden als this.

Ich vermute im ersten Beispiel, dass $()jedes liElement in ein jQuery-Objekt konvertiert wird, das die append()Funktion versteht, während im zweiten Beispiel reset()direkt auf dem Formular aufgerufen werden kann.

Grundsätzlich benötigen wir $()spezielle jQuery-only-Funktionen.

Ist das richtig?

Ja, Sie benötigen nur, $()wenn Sie jQuery verwenden. Wenn Sie möchten, dass jQuery DOM-Aufgaben erledigt, denken Sie daran.

$(this)[0] === this

Grundsätzlich verwandelt jQuery jedes Mal, wenn Sie eine Reihe von Elementen zurückerhalten, diese in ein jQuery-Objekt . Wenn Sie wissen, dass Sie nur ein Ergebnis haben, wird es im ersten Element sein.

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

Und so weiter...

$() ist die jQuery-Konstruktorfunktion.

this ist eine Referenz auf das DOM-Element des Aufrufs.

Im Grunde übergeben $(this)Sie in nur das thisin $()als Parameter, damit Sie jQuery-Methoden und -Funktionen aufrufen können.

Ja, Sie benötigen $(this)jQuery-Funktionen, aber wenn Sie auf grundlegende Javascript-Methoden des Elements zugreifen möchten, die jQuery nicht verwenden, können Sie einfach verwenden this.

Bei der Verwendung jQuerywird empfohlen, $(this)normalerweise zu verwenden . Aber wenn Sie den Unterschied kennen (Sie sollten ihn lernen und kennen), ist es manchmal bequemer und schneller, ihn nur zu verwenden this. Zum Beispiel:

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

ist einfacher und reiner als

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

thisist das Element, $(this)ist das mit diesem Element erstellte jQuery-Objekt

$(".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);
});

Ein tieferer Blick

this^MDN ist in einem Ausführungskontext enthalten

Der Geltungsbereich bezieht sich auf den aktuellen Ausführungskontext ^ECMA . Um dies zu verstehen this, ist es wichtig zu verstehen, wie Ausführungskontexte in JavaScript funktionieren.

Ausführungskontexte binden dies

Wenn die Steuerung in einen Ausführungskontext eintritt (Code wird in diesem Bereich ausgeführt), wird die Umgebung für Variablen eingerichtet (Lexikalische und Variablenumgebungen - im Wesentlichen wird ein Bereich für die Eingabe von Variablen eingerichtet, auf die bereits zugegriffen werden konnte, und ein Bereich für lokale Variablen gespeichert), und die Bindung von thiserfolgt.

jQuery bindet dies

Ausführungskontexte bilden einen logischen Stapel. Das Ergebnis ist, dass Kontexte, die sich tiefer im Stapel befinden, Zugriff auf vorherige Variablen haben, ihre Bindungen jedoch möglicherweise geändert wurden. Jedes Mal, wenn jQuery eine Rückruffunktion aufruft, ändert es diese Bindung mithilfe von apply^MDN .

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

Das Ergebnis des Aufrufs applyist, dass sich innerhalb der jQuery-Rückruffunktionen thisauf das aktuelle Element bezieht, das von der Rückruffunktion verwendet wird.

Beispielsweise ermöglicht in .eachdie häufig verwendete Rückruffunktion .each(function(index,element){/*scope*/}). In diesem Bereich this == elementist wahr.

jQuery-Rückrufe verwenden die Apply-Funktion, um die aufgerufene Funktion an das aktuelle Element zu binden. Dieses Element stammt aus dem Elementarray des jQuery-Objekts. Jedes erstellte jQuery-Objekt enthält ein Array von Elementen, die mit der Selektor- ^jQuery-API übereinstimmen, mit der das jQuery-Objekt instanziiert wurde.

$(selector)Ruft die jQuery-Funktion auf (denken Sie daran, dass dies $ein Verweis auf jQueryCode ist :) window.jQuery = window.$ = jQuery;. Intern instanziiert die jQuery-Funktion ein Funktionsobjekt. Während es möglicherweise nicht sofort offensichtlich ist, verwendet es $()intern new jQuery(). Ein Teil der Konstruktion dieses jQuery-Objekts besteht darin, alle Übereinstimmungen des Selektors zu finden. Der Konstruktor akzeptiert auch HTML-Zeichenfolgen und -Elemente . Wenn Sie thisan den jQuery-Konstruktor übergeben, übergeben Sie das aktuelle Element für ein jQuery-Objekt, mit dem erstellt werden soll . Das jQuery-Objekt enthält dann eine Array-ähnliche Struktur der DOM-Elemente, die dem Selektor entsprechen (oder im Fall von nur dem einzelnen Element this).

Sobald das jQuery-Objekt erstellt wurde, wird die jQuery-API jetzt verfügbar gemacht. Wenn eine jQuery-API-Funktion aufgerufen wird, wird diese Array-ähnliche Struktur intern durchlaufen. Für jedes Element im Array wird die Rückruffunktion für die API aufgerufen, wobei die Rückruffunktionen thisan das aktuelle Element gebunden werden . Dieser Aufruf ist im obigen Codeausschnitt zu sehen, in dem objsich die Array-ähnliche Struktur befindet und ider Iterator ist, der für die Position im Array des aktuellen Elements verwendet wird.

Ja, mit $(this)haben Sie die jQuery-Funktionalität für das Objekt aktiviert. Durch die einfache Verwendung thisverfügt es nur über generische Javascript-Funktionen.

thisVerweisen Sie auf ein Javascript-Objekt, $(this)das zur Kapselung mit jQuery verwendet wird.

Beispiel =>

// 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')