title: JQuery
text: # JQuery
  
  «write less, do more.»
  
  «scrivi di meno, fai di più.»
  
  (slogan)
  
  jQuery è una libreria JavaScript per applicazioni web, distribuita come software libero, distribuito sotto i termini della Licenza MIT.. Nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l'animazione di elementi DOM in pagine HTML, nonché semplificare l'uso di funzionalità AJAX, la gestione degli eventi e la manipolazione dei CSS.
  
  Le sue caratteristiche permettono agli sviluppatori JavaScript di astrarre le interazioni a basso livello con i contenuti delle pagine HTML. L'approccio di tipo modulare di jQuery consente la creazione semplificata di applicazioni web e contenuti dinamici versatili. Nel 2020, jQuery risulta la libreria JavaScript più utilizzata in Internet, ovvero è presente nel 74,4% dei primi 10 milioni di siti Internet più popolari secondo W3Techs.
  
  ## Sviluppo
  
  Pubblicato per la prima volta nel gennaio 2006 da John Resig, è un progetto tuttora attivo e in evoluzione, gestito da un gruppo di sviluppatori guidato da Dave Methvin.
  
  La selezione degli oggetti DOM è basata sul motore chiamato Sizzle, un progetto Open Source derivato da jQuery.
  
  ## API
  
  Il framework fornisce metodi e funzioni per gestire al meglio aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall'interprete JavaScript del browser.
  
  ### Core
  
  Il core di jQuery fornisce:
  
  * I costruttori per l'utilizzo della libreria stessa
     * Per ottenere elementi tramite un selettore (vedere sotto)
     * Per ottenere un elemento referenziandolo come parametro
     * Per creare ex novo un elemento partendo da codice HTML grezzo
  * I metodi e le proprietà per accedere agli elementi contenuti in un oggetto jQuery
     * Per conoscere il numero di elementi (funzione size oppure proprietà length)
     * Per iterare ogni elemento (funzione each)
     * Per conoscere il selettore utilizzato o l'elemento DOM referenziato (proprietà selector o context)
     * Per ottenere e manipolare elementi nativi (funzioni get e index)
  * I metodi per creare e utilizzare liste e code (di oggetti e funzioni)
  * I metodi per estendere il framework mediante plugin (funzione extend e fn.extend)
  * I metodi per eseguire animazioni mediante le funzioni show, hide e animate
  
  ### Selettori
  
  I selettori sono gli strumenti utilizzati per ottenere l'accesso agli elementi HTML della pagina, utilizzando la stessa sintassi dei selettori Cascading Style Sheet, ovvero:
  
  * Per selezionare un elemento in base al suo id (#immagine_24)
  * Per selezionare uno o più elementi in base alla classe (.thumb oppure div.modale oppure .class1.subclass)
  * Per selezionare in modo gerarchico, mediante l'utilizzo di parole chiave come ancestor, sibling, prev e altre
  * Per selezionare in base a pseudo-classi (:first, :last, :not, ecc.)
  * Per selezionare in base ad attributi o contenuti (:contain, :has, :hidden, [type="text"], ecc.)
  
  ### Attributi
  
  Gli attributi sono ottenuti o modificati in maniera diversa a seconda del browser; jQuery aiuta lo sviluppatore offrendo un'unica funzione di frontend valida sia come getter (ottenere un valore), sia come setter (impostare un valore), a seconda che sia specificato o no un parametro:
  
  * Metodo per gli attributi generici (attr)
  * Metodi per le classi
     * Per conoscere se un elemento appartiene ad una specifica classe (hasClass)
     * Per impostare o rimuovere una classe (addClass, removeClass e lo switch toggleClass)
  * Metodi per il contenuto
     * Per il codice HTML, come la proprietà innerHTML (html)
     * Per il contenuto testuale (text)
     * Per il valore, solitamente per i campi di un form, che siano campi testuali, campi multiriga, liste dropdown o checkbox (val)
  
  ### DOM Traversing
  
  Per risalire a elementi padre, figli, per i nodi foglia o per elementi successivi, il framework propone numerosi metodi e funzioni per attraversare e scorrere il DOM del documento.
  
  ### Manipolazione
  
  La manipolazione del DOM è semplificata da numerosi metodi:
  
  * Per aggiungere e rimuovere elementi alla pagina, o in una posizione specifica
  * Per sostituire elementi, o per circondarli con del nuovo contenuto
  * Per eliminare tutti gli elementi contenuti in un certo nodo, o per copiarli
  
  ### CSS
  
  Per controllare lo stile degli elementi, in maniera semplificata e standardizzata. Sono forniti i metodi:
  
  * Per cambiare, rimuovere o aggiungere proprietà grafiche di tutti gli elementi selezionati
  * Per ottenere e sostituire velocemente proprietà solitamente difficili da manipolare
     * Lo scroll di pagina o di un elemento
     * Le dimensioni (height e width)
     * Le dimensioni interne (escludendo quindi il margine)
     * L'offset rispetto ai bordi
  
  ### Eventi
  
  Il framework riconosce gli oggetti di tipo event e provvede a modificare le loro proprietà rendendoli uniformi, semplificando la loro gestione, la loro propagazione, e fornendo un'utile modalità per impedire al browser di continuare l'esecuzione (ad esempio sulla onclick di un link). L'assegnazione di eventi quali click, load, mouseover è gestita in maniera efficace e non invadente.
  
  ### Effetti bidimensionali
  
  Gli effetti messi a disposizione dal framework, servono a manipolare la visibilità degli elementi selezionati. È possibile mostrarli o nasconderli con vari effetti, tra i quali:
  
  * Effetto fading, la dissolvenza in entrata o uscita
  * Effetto sliding, l'effetto scivolata
  * Nascondimento o visualizzazione piatta
  
  È possibile definire facilmente effetti personalizzati specificando la proprietà CSS da manipolare (per esempio: altezza, bordo e altro), come è pure possibile specificare la durata dell'effetto e una funzione di callback da eseguire dopo l'animazione.
  
  ### Effetti tridimensionali
  
  Con JQuery si possono creare visite virtuali e alcuni effetti che simulano il web 3D.
  
  ### AJAX
  
  La gestione delle chiamate asincrone (AJAX) è davvero semplificata, e sono fornite le funzioni:
  
  * Per caricare contenuti dinamicamente
     * Funzione di caricamento semplice
     * Funzione di caricamento di codice HTML con inserimento automatico
  * Per eseguire richieste asincrone (con metodo GET/POST)
  * Per l'interazione con JavaScript
     * Funzione per caricare un oggetto JSON
     * Funzione per caricare un file JavaScript remoto ed eseguirlo automaticamente
  
  Anche gli eventi AJAX sono gestibili in modo semplificato, per il completamento dei form di immissione, la gestione degli errori e l'invio dei dati.
  
  ### Utilità
  
  La libreria fornisce scorciatoie per gestire vettori, per la manipolazione di stringhe e per il riconoscimento di browser e oggetti/funzioni.
  
  ## Caratteristiche
  
  L'oggetto principale, di nome jQuery, è genericamente utilizzato tramite il suo alias, il carattere $, per mantenere uniformità con la libreria Prototype.
  
  I selettori, in jQuery, utilizzano la sintassi dei selettori css; sono quindi concatenabili e molto precisi nel restituire gli elementi voluti.
  
  Concatenazione del codice (chainability); quasi ogni metodo restituisce lo stesso oggetto jQuery dal quale è stata chiamato. Grazie a questo, il codice è molto più leggibile.
  
  Può essere riscritta come segue
  
  La libreria non collide con altri framework quali Prototype, MooTools, o YUI, e può essere pertanto utilizzata assieme ad esse.
  
  jQuery vanta una discreta varietà di plugin che ne estendono le funzionalità. Fra i plugin ufficiali vi è JQuery UI (user interface per jQuery), nato per semplificare ed uniformare la gestione di un'interfaccia grafica composta da temi, widget, animazioni, transizioni, ecc.
  
  ## Versioni
  
  | Versione | Versione iniziale | Ultimo aggiornamento | Dimensioni ridotte (KB) | Note aggiuntive |
  | - | - | - | - | - |
  | 1.0 | 26 agosto 2006 | | | Prima versione stabile |
  | 1.1 | 14 gennaio 2007 | | | |
  | 1.2 | 10 settembre 2007 | 1.2.6 | 54.5 | |
  | 1.3 | 14 gennaio 2009 | 1.3.2 | 55.9 | Sizzle Selector Engine introdotto nel core |
  | 1.4 | 14 gennaio 2010 | 1.4.4 | 76.7 | |
  | 1.5 | 31 gennaio 2011 | 1.5.2 | 83.9 | Gestione della richiamata differita, riscrittura del modulo ajax |
  | 1.6 | 3 maggio 2011 | 1.6.4 | 89.5 | Significativi miglioramenti delle prestazioni per le funzioni attr e val |
  | 1.7 | 3 novembre 2011 | 1.7.2 (21 marzo 2012) | 92.6 | Nuove API per eventi: .on e .off, mentre le vecchie API sono ancora supportate. |
  | 1.8 | 9 agosto 2012 | 1.8.3 (13 novembre 2012) | 91.4 | Sizzle Selector Engine riscritto, animazioni migliorate e flessibilità $ (html, props). |
  | 1.9 | 15 gennaio 2013 | 1.9.1 (4 febbraio 2013) | 90.5 | Rimozione di interfacce deprecate e pulizia del codice |
  | 1.10 | 24 maggio 2013 | 1.10.2 (3 luglio 2013) | 90.9 | Correzioni di bug incorporate e differenze segnalate dai cicli beta 1.9 e 2.0 |
  | 1.11 | 24 gennaio 2014 | 1.11.3 (28 aprile 2015) | 93.7 | |
  | 1.12 | 8 gennaio 2016 | 1.12.4 (20 maggio 2016) | 94.9 | |
  | 2.0 | 18 aprile 2013 | 2.0.3 (3 luglio 2013) | 81.7 | Eliminato il supporto di IE 6–8 per i miglioramenti delle prestazioni e la riduzione delle dimensioni dei file |
  | 2.1 | 24 gennaio 2014 | 2.1.4 (28 aprile 2015) | 82.4 | |
  | 2.2 | 8 gennaio 2016 | 2.2.4 (20 maggio 2016) | 83.6 | |
  | 3.0 | 9 giugno 2016 | 3.0.0 (9 giugno 2016) | 84.3 | Promesse/A + supporto per Deferreds, $ .ajax e $ .when, .data compatibile con HTML5 |
  | 3.1 | 7 luglio 2016 | 3.1.1 (23 settembre 2016) | 84.7 | jQuery.readyException aggiunta, gli errori del gestore pronto ora non vengono silenziati |
  | 3.2 | 16 marzo 2017 | 3.2.1 (20 marzo 2017) | 84.6 | Aggiunto supporto per il recupero dei contenuti degli elementi<template>e deprecazione di alcuni vecchi metodi. |
  | 3.3 | 19 gennaio 2018 | 3.3.1 (20 gennaio 2018) | 84.9 | Deprecazione di vecchie funzioni, le funzioni che accettano le classi ora le supportano anche in formato array. |
  | 3.4 | 10 aprile 2019 | 3.4.1 (1 maggio 2019) | 86.1 | Miglioramenti delle prestazioni noncee supporto nomodule, correzioni per elementi radio, una correzione minore per la sicurezza. |
  | 3.5 | 10 aprile 2020 | 3.5.1 (4 maggio 2020) | 87.4 | Correzioni di sicurezza .evene .oddmetodi jQuery.trimdeprecati |
  | 3.6 | 2 marzo 2021 | 3.6.0 (2 marzo 2021) | 90 | Correzioni di bug e miglioramenti |
  
  ## Alternative
  
  Diversi articoli hanno fatto notare come, sebbene jQuery fosse una libreria indispensabile per svolgere determinati compiti con JavaScript, con le versioni più recenti di JavaScript e dei browser, le funzionalità di jQuery sono diventate funzionalità standard di JavaScript.
  
  Nel corso degli anni è nato Vanilla JS, un finto framework JavaScript, il cui scopo è promuovere l'uso di JavaScript senza framework.
  
  Con la nascita di HTML 5 e CSS 3 alcune possibilità come la creazione di gallerie d'immagini, effetti e menu a tendina sono fattibili senza l'utilizzo di JQuery e/o JQuery UI e/o Ajax, cosa che con HTML 4 e CSS 2 era spesso impossibile fare.
  
  ## Esempi di uso JQuery
  
  * Effetto Zoom JQuery al passaggio del mouse su un'immagine
  * Effetti JQuery accordion e tab
  * Effetto JQuery "spotlight" al passaggio del mouse
  