Qual è la differenza tra '$ (questo)' e 'questo'?

Attualmente sto lavorando a questo tutorial: Introduzione a jQuery

Per i due esempi seguenti:

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

Nota nel primo esempio, usiamo $(this)per aggiungere del testo all'interno di ciascun lielemento. Nel secondo esempio utilizziamo thisdirettamente quando reimposta il modulo.

$(this)sembra essere usato molto più spesso di this.

La mia ipotesi è nel primo esempio, $()sta convertendo ogni lielemento in un oggetto jQuery che comprende la append()funzione mentre nel secondo esempio reset()può essere chiamato direttamente sul modulo.

Fondamentalmente abbiamo bisogno $()di funzioni speciali solo per jQuery.

È corretto?

Sì, è necessario solo $()quando si utilizza jQuery. Se vuoi l'aiuto di jQuery per fare cose DOM, tienilo a mente.

$(this)[0] === this

Fondamentalmente ogni volta che si ottiene un insieme di elementi indietro jQuery lo trasforma in un oggetto jQuery . Se sai di avere un solo risultato, sarà nel primo elemento.

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

E così via...

$() è la funzione di costruzione jQuery.

this è un riferimento all'elemento DOM di invocazione.

Quindi sostanzialmente, in $(this), stai semplicemente passando thisin $()come parametro in modo da poter chiamare i metodi e le funzioni jQuery.

Sì, è necessario $(this)per le funzioni jQuery, ma quando si desidera accedere ai metodi javascript di base dell'elemento che non utilizzano jQuery, è possibile utilizzare semplicemente this.

Durante l'utilizzo jQuery, si consiglia di utilizzare di $(this)solito. Ma se conosci (dovresti imparare e conoscere) la differenza, a volte è più conveniente e più veloce usare solo this. Per esempio:

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

è più facile e più puro di

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

thisè l'elemento, $(this)è l'oggetto jQuery costruito con quell'elemento

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

Uno sguardo più profondo

this^MDN è contenuto in un contesto di esecuzione

L'ambito si riferisce all'attuale contesto di esecuzione ^ECMA . Per capire this, è importante capire come funzionano i contesti di esecuzione in JavaScript.

i contesti di esecuzione lo legano

Quando il controllo entra in un contesto di esecuzione (il codice viene eseguito in quell'ambito) l'ambiente per le variabili viene impostato (ambienti lessicali e variabili - essenzialmente questo imposta un'area per l'immissione delle variabili che erano già accessibili e un'area per le variabili locali da memorizzato) e si thisverifica l'associazione di .

jQuery lo lega

I contesti di esecuzione formano uno stack logico. Il risultato è che i contesti più profondi nello stack hanno accesso alle variabili precedenti, ma i loro collegamenti potrebbero essere stati modificati. Ogni volta che jQuery chiama una funzione di callback, altera questa associazione usando apply^MDN .

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

Il risultato della chiamata applyè che all'interno delle funzioni di callback di jQuery, si thisriferisce all'elemento corrente utilizzato dalla funzione di callback.

Ad esempio, in .each, la funzione di richiamata comunemente usata consente .each(function(index,element){/*scope*/}). In tale ambito, this == elementè vero.

I callback jQuery utilizzano la funzione apply per associare la funzione chiamata all'elemento corrente. Questo elemento proviene dalla matrice di elementi dell'oggetto jQuery. Ogni oggetto jQuery creato contiene una matrice di elementi che corrispondono ^{all'API jQuery} del selettore utilizzata per creare un'istanza dell'oggetto jQuery.

$(selector)chiama la funzione jQuery (ricorda che $è un riferimento a jQuery, code:) window.jQuery = window.$ = jQuery;. Internamente, la funzione jQuery crea un'istanza di un oggetto funzione. Quindi, anche se potrebbe non essere immediatamente ovvio, l'utilizzo di $()usi interni new jQuery(). Parte della costruzione di questo oggetto jQuery è trovare tutte le corrispondenze del selettore. Il costruttore accetterà anche stringhe ed elementi html . Quando si passa thisal costruttore jQuery, si passa l'elemento corrente per un oggetto jQuery con cui costruire . L'oggetto jQuery contiene quindi una struttura a matrice di elementi DOM che corrispondono al selettore (o solo al singolo elemento nel caso di this).

Una volta creato l'oggetto jQuery, l'API jQuery è ora esposta. Quando viene chiamata una funzione API jQuery, itererà internamente su questa struttura simile ad un array. Per ogni elemento dell'array, chiama la funzione di callback per l'API, associando i callback thisall'elemento corrente. Questa chiamata può essere vista nello snippet di codice sopra dove si objtrova la struttura simile ad array, ed iè l'iteratore usato per la posizione nell'array dell'elemento corrente.

Sì, utilizzando $(this), hai abilitato la funzionalità jQuery per l'oggetto. Usando solo this, ha solo funzionalità Javascript generiche.

thisfare riferimento a un oggetto JavaScript e $(this)utilizzato per incapsulare con jQuery.

Esempio =>

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