Cos'è this? this è un elemento DOM

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Cos'è this? this è un elemento DOM"

Eduardo Sorrentino
7 anni fa
Visualizzazioni

1 Cos'è this? Uno degli aspetti più confusi di jquery è come assegna l'ambito durante il callback. Deve essere parecchio confuso perché l'argomento genera un sacco di domande sulla mailing list di jquery. Peccato, davvero, perché jquery imposta l'ambito al fine di semplificare il nostro codice e non per renderlo più confuso. Ecco alcune indicazioni che possono aiutare a ricordare di cosa si tratta la parola this. this è un elemento DOM (Document Object Model) Quando this è un elemento DOM? La risposta breve è - di solito. Lo scripting con jquery molto spesso comporta l'uso di funzioni di callback. Nella gestione di un evento, o iterando un insieme di nodi, nell'animare un'immagine, o nell'applicazione di un filtro dinamico, le funzioni di richiamate (o callback) sono utilizzate per invocare il codice personalizzato al momento opportuno. Per rendere le cose facili per te, jquery imposta l'ambito della funzione di callback all'elemento che costituisce l'oggetto della richiamata. Per esempio, quando si vuole gestire un evento clic del mouse per un elemento, si associa una funzione per gestire l'evento in questo modo: 1 $('#mybutton').bind('click', function() { 2 // il nostro codice per gestire l'evento 3 // si trova qui, nella funzione di callback Quando un utente fa clic sull'elemento 'mybutton', jquery invoca la funzione di callback che è stato passato al metodo bind. Ma quando s'invoca nostro callback si definisce l'ambito corrente all'elemento DOM che ha avviato l'evento, in questo caso l'elemento 'mybutton'. jquery lo fa per comodità. L'oggetto che ha più probabilità di essere richiamato dall'evento in callback è l'elemento che ha generato l'evento. E quale modo più facile per avere accesso a esso utilizzando la parola chiave this? Così all'interno della funzione di callback si può presumere che this è l'elemento rilevante DOM: 1 $('#mybutton').bind('click', function() { 2 // 'this' è l'elemento DOM che ha attivato l'evento 3 alert(this.id == 'mybutton'); Diamo un'occhiata a quanto spesso this è un elemento DOM quando si utilizza jquery. Abbiamo appena visto il caso di un gestore di eventi, qui sono alcuni altri: Elementi d'iterazione con il metodo each: 1 $('div').each(function() { 2 // 'this' è un elemento DOM 3 alert(this.tagname.tolowercase() == 'div');

2 Usando il metodo load di AJAX: 1 $('#mydiv').load('myurl.php', function() { 2 // 'this' è un elemento DOM 3 alert(this.id == 'mydiv'); Usando animazione: 1 $('#mydiv').fadeout('slow', function() { 2 // 'this' è un elemento DOM 3 alert(this.id == 'mydiv'); Utilizzando filtri di selezione: 1 var set = $('div').filter(function() { 2 // 'this' è l'elemento DOM 3 alert(this.tagname.tolowercase() == 'div'); 4 return true; 5 }); Usando il costruttore "document ready": 1 $(document).ready(function() { 2 // 'this' è l'oggetto del documento 3 alert(this === document); Usando eventi globali AJAX: 1 $().ajaxstart(function() { 2 // 'this' è l'oggetto del documento 3 alert(this === document); Quest'ultimo potrebbe confondere. Perché this è l'oggetto del documento nella richiamata ajaxstart? I metodi che avvolgono le funzioni di callback per gli eventi globali AJAX sono metodi vincolanti. Questi si legano al gestore di eventi di un elemento DOM. Quando l'evento avviene, il gestore è chiamato, nel contesto dell'elemento DOM. E quando si utilizza la funzione dollaro con jquery senza argomenti, utilizza implicitamente l'oggetto documento come l'elemento selezionato. Quindi un altro modo di scrivere lo snippet del codice precedente è il seguente: 1 $(document).bind('ajaxstart', function() { 2 alert(this == document); 3 });

3 Ora probabilmente si può vedere come this è determinato da come si chiamano i metodi AJAX vincolanti: 1 $(window).ajaxstart(function() { 2 alert(this == window); 3 }); 4 $('#busyindicator').ajaxstop(function() { 5 alert(this.id == 'busyindicator'); 6 }); 7 $('div.error').ajaxerror(function() { 8 alert(this.tagname.tolowercase() == 'div'); 9 }); Cos'è this? this è un oggetto Come menzionato prima, quando si cicla degli elementi con l iteratore each di jquery, this è sempre un elemento DOM. Tecnicamente, è più esatto dire che all'interno di un'iterazione each, this è il soggetto del ciclo nell'iterazione corrente. Questa distinzione è importante perché il metodo each di jquery può essere utilizzato per scorrere su qualsiasi tipo di oggetti array e non solo Liste di nodi. 01 var arr = ['a','b','c']; 02 $.each(arr, function(index, obj) { 03 // 'this' è l'oggetto dell'iterazione corrente 04 alert(this.constructor == String); 05 alert(arr[index] == this); 06 alert(this == obj); 07 }); 08 // o utilizzando una sintassi diversa 09 // ma funzionalmente equivalenti: 10 $(arr).each(function(index, obj) { 11 // 'this' è l'oggetto dell'iterazione corrente 12 alert(this.constructor == String); 13 alert(arr[index] == this); 14 alert(this == obj); 15 });

4 this è un oggetto jquery Prendete nota autori dei plugin! Se avete scritto un plugin le cui funzionalità possono essere applicate a molti elementi, allora molto probabilmente l'avete fatto utilizzando l'estensione standard fn: 1 $.fn.myplugin = function() { 2 // il vostro codice del plugin va qui! 3 }); All'interno della vostra funzione del plugin this è l'oggetto jquery. E se si rispettano le linee guida del Plugin Authoring, il metodo del plugin restituisce sempre this al fine di mantenere Chainability. 1 $.fn.myplugin = function() { 2 // 'this' è l'oggetto jquery 3 alert("jquery version: " + this.jquery); 4 return this; 5 }); Tipicamente, un plugin funziona su ogni elemento DOM che è stato selezionato dall'oggetto jquery. In poche parole, ciò significa usare il metodo each all'interno di ogni plugin. Troverete spesso questa tecnica implementata nel seguente modo: 1 $.fn.myplugin = function() { 2 // 'this' è l'oggetto jquery 3 alert("jquery version: " + this.jquery); 4 return this.each(function() { 5 // 'this' è ora l'elemento DOM 6 // come soggetto dell'iterazione 'each' 7 alert("current element: " + this.tagname); 8 }); 9 }); this è un oggetto AJAX per impostazioni Ho accennato prima sul metodo load di jquery e le funzioni di callback per gli eventi globali AJAX. Quelle richiamate sono legate specificamente a un elemento del DOM o a un insieme di elementi. Il resto dei metodi AJAX, $.get, $.post, $.ajax, ecc, operano al di fuori del contesto di un insieme specifico dell'elemento. Ma questi metodi possono essere passati con le funzioni di callback per cui è importante capire che this è in quelle richiamate. Fortunatamente, tutto quello che si deve ricordare è che per ciascuna delle funzioni di callback locale AJAX, beforesend, success, complete, e error, this è sempre uguale alle impostazioni dell'oggetto utilizzato per la chiamata AJAX.

5 01 $.get('myurl', function() { 02 // 'this' è l'oggetto AJAX per le 03 // impostazioni usato per ottenere la chiamata 04 alert(this.url == 'myurl'); 05 }); 06 $.ajax({ 07 type: 'POST', 08 url: 'myurl', 09 timeout: 5000, 10 beforesend: function() { 11 alert(this.url == 'myurl'); 12 }, 13 error: function() { 14 alert(this.timeout == 5000); 15 }, 16 success: function() { 17 alert(this.type == 'POST'); 18 }, 19 complete: function() { 20 alert(this.async == true); 21 } 22 }); Conversione da this a $this Quando this è un elemento DOM che spesso è nel contesto del codice che ha bisogno di accedere o manipolare in qualche modo. Quindi, come possiamo utilizzare la potenza delle API jquery quando this è un elemento DOM? Questo, naturalmente, è qualcosa che eccelle in jquery. Basta trasformare this in $this: 01 $('div').each(function() { 02 // 'this' è un elemento DOM 03 // avvolgere 'this' in un oggetto jquery 04 var $this = $(this); 05 // ora abbiamo l'api jquery a nostra disposizione 06 var title = $this.attr("title"); 07 if (title!= null) { 08 $this.prepend("<h2>" + title + "</h2>"); 09 } 10 }); In caso di dubbio Quando siete confusi su cosa è this all'interno di un blocco di un dato codice, chiedetevi: "Che cosa ha più senso qui?" Molto spesso, la risposta a questa domanda è uguale a this.

Documenti analoghi

Fondamentali di jquery

Fondamentali di jquery b) Nozioni JavaScript Variabili condizionali utilizzando l'operatore ternario A volte si desidera impostare il valore di una variabile in funzione a una certa condizione. Per farlo