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

Question

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 elemento li. Nel secondo esempio usiamo this direttamente durante il ripristino del modulo.

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

La mia ipotesi è nel primo esempio, reset() sta convertendo ogni <=> elemento in un oggetto jQuery che comprende la funzione <=> mentre nel secondo esempio <=> può essere chiamato direttamente nel modulo.

Fondamentalmente abbiamo bisogno di <=> per funzioni speciali solo per jQuery.

È corretto?

Answer 1

Sì, devi solo $() quando stai usando jQuery. Se vuoi l'aiuto di jQuery per fare cose DOM, tienilo a mente.

$(this)[0] === this

Fondamentalmente ogni volta che si ottiene una serie 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 ...

Answer 2

$() è la funzione di costruzione jQuery.

this è un riferimento all'elemento DOM di invocazione.

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

Answer 3

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

Answer 4

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

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

è più semplice e puro di

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

Answer 5

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

apply ^MDN è contenuto in un contesto di esecuzione

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

contesti di esecuzione associano questo

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 in cui inserire le variabili che erano già accessibili e un'area per locale variabili da memorizzare) e si verifica l'associazione di .each(function(index,element){/*scope*/}).

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, modifica questa associazione utilizzando this == element ^MDN .

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

Il risultato della chiamata $(selector) è che all'interno delle funzioni di callback di jQuery, $ si riferisce all'elemento corrente utilizzato dalla funzione di callback.

Ad esempio, in jQuery, la funzione di richiamata comunemente usata consente window.jQuery = window.$ = jQuery;. In tale ambito, $() è vero.

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

new jQuery() chiama la funzione jQuery (ricorda che obj è un riferimento a i, codice: <=>). Internamente, la funzione jQuery crea un'istanza di un oggetto funzione. Pertanto, anche se potrebbe non essere immediatamente ovvio, l'utilizzo di <=> utilizza internamente <=>. Parte della costruzione di questo oggetto jQuery è trovare tutte le corrispondenze del selettore. Il costruttore accetterà anche stringhe html ed elementi . Quando passi <=> al costruttore jQuery, stai passando l'elemento corrente per un oggetto jQuery da costruire con . L'oggetto jQuery contiene quindi una struttura a matrice di elementi DOM che corrispondono al selettore (o solo al singolo elemento nel caso di <=>).

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 il callback <=> all'elemento corrente. Questa chiamata può essere visualizzata nello snippet di codice sopra dove <=> è la struttura simile a matrice e <=> è l'iteratore utilizzato per la posizione nella matrice dell'elemento corrente.

Answer 6

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

Answer 7

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