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

567

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?

Kevin Wu
quelle
2
@Reigel, warum war das geschützt? Das OP befragte und erriet die richtige Antwort.
Vol7ron
21
@ Reeigel: Ich denke, ich sollte dies in Meta fragen, aber wenn das alles ist, was für den Schutz erforderlich ist, sollten nicht alle Fragen geschützt werden
Vol7ron

Antworten:

516

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...

Spencer Ruport
quelle
3
Gibt es einen Grund für die Verwendung $(this)[0]über , thiswenn sie immer die gleichen sind?
Jay
2
@ Jay Wenn Sie lieber lange tippen als nur 'this' verwenden möchten, dann ja. $ () ist die jQuery-Konstruktorfunktion. "'this' ist ein Verweis auf das DOM-Element des Aufrufs. Im Grunde übergeben Sie in $ (this) nur das in $ () als Parameter, damit Sie jQuery-Methoden und -Funktionen aufrufen können."
Juliver Galleto
2
@ jay - Es gibt keinen guten Grund zu verwenden. $(this)[0]Ich habe es nur verwendet, um das Konzept zu veranschaulichen. :) Ich benutze aber $("#myDiv")[0]über document.getElementById("myDiv").
Spencer Ruport
369

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

Reigel
quelle
92

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.

Alex King
quelle
74

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"); 
});
Fredrick Gauss
quelle
9
Das Beispiel hat mir gefallen. Vielen Dank !
Ammar
46

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

thisMDN 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 applyMDN .

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.

Travis J.
quelle
39

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.

Ray Lu
quelle
-1

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')
Lalit Kumar Maurya
quelle