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

Question

Ich arbeite derzeit an diesem Tutorial arbeiten: Getting Started with 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(); 
    }); 
}); 

Hinweis im ersten Beispiel verwenden wir $(this) einen Text innerhalb jedes li Element anzuhängen. Im zweiten Beispiel verwenden wir this direkt beim Zurücksetzen des Formulars.

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

Meine Vermutung ist, in dem ersten Beispiel wird jedes $()li Element in ein jQuery Objekt umzuwandeln, die die Funktion append() während im zweiten Beispiel versteht reset() kann direkt auf der Form bezeichnet werden.

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

Ist das korrekt?

Answer 1

Ja, Sie brauchen nur $(), wenn Sie jQuery verwenden. Wenn Sie möchten, dass jQuerys Hilfe DOM-Dinge macht, denken Sie daran.

$(this)[0] === this 

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

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

Und so weiter ...

Answer 2

Ja, durch $(this) verwenden, aktivieren Sie jQuery Funktionalität für das Objekt. Mit nur this hat es nur generische Javascript-Funktionalität.

Answer 3

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

Answer 4

$() ist die jQuery-Konstruktorfunktion.

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

Also im Grunde, in $(this), übergeben Sie nur die this in $() als Parameter, damit Sie jQuery Methoden und Funktionen aufrufen können.

Answer 5

Bei Verwendung von jQuery wird empfohlen, normalerweise $(this) zu verwenden. Aber wenn Sie den Unterschied wissen (Sie sollten lernen und wissen), ist es manchmal bequemer und schneller, nur this zu verwenden.Zum Beispiel:

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

ist einfacher und reiner als

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

Answer 6

diese Referenz ein Javascript-Objekt und $ (this) verwendet mit jQuery verkapseln.

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

Answer 7

this das Element ist, ist das Objekt $(this) jQuery mit diesem Element konstruiert

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

einen tieferen Einblick

this^MDN ist in einem Ausführungskontext enthalten

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

Ausführungskontexte binden diese

Wenn die Steuerung einen Kontext Ausführung tritt (Code wird in diesem Umfang ausgeführt wird) die Umgebung für die Variablen sind Setup (lexikalisch und Variable Environments - im Wesentlichen der für Variablen eine Fläche von bis Sets Geben Sie ein, welche bereits zugänglich waren und ein Bereich für lokale Variablen gespeichert werden soll, und die Bindung von this tritt auf.

jQuery Anlegen gebunden

Ausführungskontexte einen logischen Stapel bilden. Das Ergebnis ist, dass Kontexte, die tiefer im Stapel liegen, Zugriff auf vorherige Variablen haben, ihre Bindungen jedoch möglicherweise geändert wurden. Jedes Mal, wenn jQuery eine Callback-Funktion aufruft, wird diese durch Verwendung von apply^MDN geändert.

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

Das Ergebnis ist, dass apply Aufruf Innenseite jQuery Rückruffunktionen, this auf das aktuelle Element verweist durch die Callback-Funktion verwendet wird.

Zum Beispiel kann in .each die häufig verwendete Callback-Funktion .each(function(index,element){/*scope*/}). In diesem Bereich ist this == element wahr.

jQuery-Callbacks verwenden die Funktion apply, um die aufgerufene Funktion mit dem aktuellen Element zu verknüpfen. Dieses Element stammt aus dem Elementarray des jQuery-Objekts. Jedes erstellte jQuery-Objekt enthält ein Array von Elementen, die mit dem selector^{jQuery API} übereinstimmen, das zum Instanziieren des jQuery-Objekts verwendet wurde.

$(selector) ruft die jQuery-Funktion (nicht vergessen, dass $ ist ein Verweis auf jQuery, Code: window.jQuery = window.$ = jQuery;). Intern stellt die jQuery-Funktion ein Funktionsobjekt bereit. Auch wenn es nicht sofort offensichtlich ist, verwendet intern $()new jQuery(). Ein Teil der Konstruktion dieses jQuery-Objekts besteht darin, alle Übereinstimmungen des Selektors zu finden. Der Konstruktor akzeptiert auch HTML-Strings und Elemente. Wenn Sie this an den jQuery-Konstruktor übergeben, übergeben Sie das aktuelle Element für ein zu erstellendes jQuery-Objekt mit. Das jQuery-Objekt enthält dann eine Array-ähnliche Struktur der DOM-Elemente, die mit dem Selektor übereinstimmen (oder nur das einzelne Element im Fall von this).

Sobald das jQuery-Objekt erstellt wurde, wird die jQuery-API angezeigt. Wenn eine jQuery-API-Funktion aufgerufen wird, wird sie intern über diese Array-ähnliche Struktur iterieren. Für jedes Element im Array ruft es die Callback-Funktion für die API auf und bindet die Callbacks this an das aktuelle Element. Dieser Aufruf ist im Code-Snippet oben zu sehen, wobei obj die Array-ähnliche Struktur ist und i der Iterator ist, der für die Position im Array des aktuellen Elements verwendet wird.