Cos'è jQuery?

Indice

Secondo i suoi creatori, jQuery è una “libreria JavaScript molto veloce e molto leggera che semplifica lo sviluppo di applicazioni web lato client.” In altre parole, jQuery include molte funzionalità per creare facilmente pagine web di applicazioni dinamiche complesse.

Nozioni di base
⤽
Per utilizzare jQuery, c’è solo bisogno di scaricare la libreria e vincolare, sulle nostre pagine, l’unico file JavaScript che la contiene:
Copia codice 

<script type="text/javascript" src="jquery.js"></script>
La libreria è scaricabile in due versioni: la versione decompressa occupa 61 KB, ed è la migliore scelta per sviluppare applicazioni. La versione compressa occupa solo 20 KB ed è la scelta ideale per il server di produzione, per ridurre al minimo il tempo di caricamento dell’applicazione.
Una delle istruzioni più utilizzate in applicazioni JavaScript è la seguente:
Copia codice 

window.onload = function() { ... }
La dichiarazione di sopra consente di eseguire il codice JavaScript quando la pagina è completamente caricata. Si tratta di una istruzione essenziale in applicazioni web complesse, perché ogni cambiamento di pagina o selezione di qualsiasi elemento richiede che l’albero del DOM della pagina sia completamente costruito, e quindi che sia disponibile il codice HTML nell’intera pagina. jQuery ha una dichiarazione molto simile che equivale a quanto sopra:
Copia codice 

$(document).ready( function() { ... } );
Il grande vantaggio della funzione di jQuery è che si può manipolare la pagina appena viene caricato il suo codice HTML (e quindi, appena ha costruito l’albero del DOM della pagina), mentre la funzione JavaScript attende che si carichi tutti gli elementi della pagina, incluse tutte le immagini. In questo modo, le applicazioni realizzate con jQuery sono in grado di rispondere molto più rapidamente rispetto alle tradizionali applicazioni JavaScript.
D’altra parte, la funzione getElementById() è probabilmente la più comunemente utilizzata nello sviluppo di applicazioni Web, permettendo selezionare il valore del suo attributo “id”. Inoltre, ci sono altre due funzioni correlate: getElementsByTagName() e getElementsByName(). jQuery include la funzione $() come alternativa più veloce e più completa per selezionare qualsiasi elemento della pagina:
Con JavaScript
⤽
Copia codice 

// Seleziona un elemento
document.getElementById("mioParragrafo");
// Selezionare tutti i liks
document.getElementsByTagName("a");
// Seleziona tutto quello di prima
?
// Seleziona mediante la classe CSS
?
Con jQuery
⤽
Copia codice 

// Seleziona un elemento
$("#mioParragrafo");
 // Seleziona tutti i liks
$("a");
// Seleziona tutto quello di prima
$("#mioParragrafo, a");
// Seleziona mediante la classe CSS
$(".miaClasse");