JQuery
# 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
