jQuery – Le basi

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
uso della funzione jQuery $()

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

Download jQuery v3.6.1
Download jQuery v3.6.1

Successivamente possiamo scaricare la versione compressa (più leggera e adatta alla produzione) , quella non compressa (adatta allo sviluppo).

tipologie di download di jQuery 3.6.1
tipologie di download di jQuery 3.6.1

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");
});
stampa su console quando il documento è pronto
stampa su console quando il documento è pronto

Nelle prossime lezioni utilizzeremo jQuery per manipolare gli elementi della pagina

Link alla mia repository GitHub sulla lezione di oggi

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »