Categoria
Articoli tecnici organizzati per gruppo funzionale.
Le vecchie versioni di jQuery (pre-3.6.0) registrano listener su 'touchstart' o 'touchmove' senza l'opzione '{ passive: true }', generando avvisi sulle prestazioni nei DevTools di Chrome e penalità nei punteggi Lighthouse.
Se l'utente passa rapidamente il cursore sopra un elemento associato ad animazioni, jQuery accoda ciascuna transizione facendole eseguire una dopo l'altra anche dopo che il cursore è uscito; si risolve svuotando la coda con '.stop(true, false).animate(...)'.
Se l'elemento passato a '.append($el)' esiste già nel documento, il DOM lo sposta fisicamente nella nuova posizione; per creare una copia senza rimuovere l'originale è indispensabile invocare esplicitamente '.clone()': '$target.append($el.clone())'.
Invocare ripetutamente '.wrap()' senza verificare se l'elemento è già racchiuso avvolge il nodo in molteplici contenitori concentrici; per avvolgere un insieme di nodi in un unico genitore comune occorre usare '.wrapAll()' verificando la presenza del genitore con '.parent(".wrapper").length === 0'.
'.remove()' cancella l'elemento dal DOM e dealloca tutti gli handler di eventi e i dati memorizzati con '$.data()'; se l'elemento deve essere temporaneamente estratto e successivamente reinserito altrove, è indispensabile usare '.detach()'.
A differenza di 'innerHTML' nativo che non esegue i tag <script> iniettati, il metodo '$el.html(markup)' di jQuery estrae ed esegue via 'eval()' qualsiasi script presente nel markup, esponendo a vulnerabilità XSS o doppie inizializzazioni.
Svuotare un contenitore assegnando 'el.innerHTML = ""' rimuove i nodi visibili ma non notifica jQuery, che continuerà a mantenere in memoria i riferimenti agli eventi e ai dati cache associati a quei nodi; per deallocare correttamente usare sempre '$el.empty()' o '$el.remove()'.
Comportamento poco compreso: il metodo '$el.data("id", 123)' memorizza il valore nella cache interna di memoria di jQuery senza rifletterlo nell'attributo HTML '<div data-id="...">'; per modificare l'attributo visibile nel DOM occorre usare '.attr("data-id", 123)'.