jQuery è la libreria Javascript più utilizzata al mondo, semplifica la gestione e la manipolazione degli elementi DOM in pagine HTML, la gestione degli eventi e le chiamate di tipo AJAX.
Sintassi
L’insieme di elementi risultante dai selettori e dai metodi di jQuery è sempre rappresentato da un oggetto jQuery. È molto facile lavorare con un oggetto jQuery quando vogliamo fare qualcosa con gli elementi di pagina web . Possiamo facilmente associare eventi a questi oggetti, aggiungere effetti, nonché concatenare più modifiche o effetti insieme.
Per creare un nuovo oggetto jQuery, utilizziamo la funzione $().
Esempi
$('div') | seleziona tutti i div nel documento |
$('#some-id') | seleziona il singolo elemento del documento che ha quell’ID |
$('.some-class') | seleziona tutti gli elementi nel documento con quella classe |
Implementazione da CDN
Content Delivery Network è un sistema di computer in rete il cui obiettivo è di instradare una richiesta di contenuto sul nodo che viene individuato come ottimale. Per implementare jQuery con questa tecnica sarà sufficiente scrivere il seguente codice nella nostra pagina HTML
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
È fondamentale linkare i file Javascript che utilizzeranno jQuery dopo il codice riportato e non prima siccome sono dipendenti quindi in questo modo
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
Implementazione in locale
Per implementare localmente sul nostro server il framework jQuery basta scaricare i files dal sito jquery.com
Successivamente possiamo scaricare la versione compressa (più leggera e adatta alla produzione) , quella non compressa (adatta allo sviluppo).
Il metodo ready
Una pagina non può essere manipolata finché il documento è pronto (ready), quindi è necessario implementare il nostro codice all’interno del metodo ready. Di seguito la pagina HTML che implementa da CDN jQuery e poi uno script per testare che tutto funzioni
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Lessons</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
il metodo ready può essere richiamato nella modalità esteso a abbreviata, di seguito ambedue i modi
// versione completa
$(document).ready(function(){
console.log("Il documento è pronto");
});
// versione shorthand
$(function(){
console.log("Il documento è pronto");
});
Nelle prossime lezioni utilizzeremo jQuery per manipolare gli elementi della pagina
