Tutorial di jQuery: nozioni basilari sui selettori, la sintassi e il resto
La redazione di IONOS8 mins
jQuery è una libreria JavaScript, sviluppata dall’americano John Resig e rilasciata nel 2006 con licenza libera. La libreria offre moltissime opzioni, dalla manipolazione HTML e degli stili CSS, al controllo degli eventi, fino all’accelerazione delle funzionalità Ajax. Le numerose opzioni si possono usare in maniera semplice, incorporando jQuery nel codice sorgete HTML del rispettivo sito web e comandandole con l’aiuto di funzioni. jQuery è già integrato in molti CMS e framework come Joomla, WordPress e MediaWiki, distinguendosi non solo per le numerose funzioni, ma anche per la grande community e i sempre nuovi aggiornamenti, che sono di competenza del team di jQuery.
Cosa si nasconde dietro a jQuery: le possibilità della libreria
jQuery semplifica in maniera considerevole la programmazione grazie al linguaggio di scripting dinamico JavaScript. L’intera libreria jQuery consiste quindi in un unico file JavaScript, che contiene le funzioni DOM, Ajax, gli eventi e gli effetti. Quindi la libreria è una grande raccolta di parti del programma, con cui possono essere modificati gli elementi del progetto. Così ad esempio scegliete gli oggetti e modificate il loro aspetto (colore, posizione ecc.), cosa che teoricamente è possibile anche con JavaScript, ma che richiede molto più lavoro.
Inoltre con jQuery potete reagire in maniera mirata alle azioni dei vostri utenti, grazie alla programmazione a eventi degli elementi della pagina. Gli utenti provocano risultati stabiliti in precedenza con il puntatore del mouse o inserendo un testo e ottengono così i contenuti desiderati o animazioni. Anche gli effetti grafici come testi in sovrapposizione o altri sono inseriti velocemente e solo con una riga di codice. Inoltre jQuery semplifica il lavoro con Ajax: la libreria ottimizza la tecnologia che carica nel background in tempo reale i contenuti della pagina e che presenta in un’interfaccia per tutti i browser. La tecnica Ajax si utilizza e configura in maniera veloce e per i diversi browser, anche per le versioni vecchie. In generale jQuery risolve diverse falle nelle implementazioni JavaScript nei singoli browser.
jQuery: ampliare la struttura di base con i plug-in
Che l’uso di jQuery sia interessante per i siti web, dipende principalmente dalla semplice ampliabilità della libreria JavaScript. Migliaia di plug-in, che semplificano ulteriormente la programmazione e migliorano jQuery ancora di più, sono disponibili per il download (in gran parte gratuito) sul sito web ufficiale di jQuery. La grande diffusione e la community ampiamente diversificata della libreria, che hanno un ruolo centrale nella diffusione di queste estensioni, assicurano dei buoni risultati. Se la funzione desiderata non è disponibile tra quelle standard e neanche come plug-in, gli sviluppatori esperti possono anche provare a creare una propria estensione.
Come integrare la libreria JavaScript
Per poter usare jQuery per il proprio progetto, prima di tutto dovete incorporarlo nella libreria. Per farlo avete la possibilità di hostare il file JavaScript sul vostro spazio web o di inserire un link ad uno spazio web esterno. Se siete interessati alla prima variante, trovate il file nella pagina dedicata ai download sul sito di jQuery. Lì potete scegliere tra la versione compressed, production jQuery e quella uncompressed, development jQuery. Per salvare in locale il file scelto, cliccate semplicemente con il tasto destro del mouse sul link, scegliete “Salva con nome” e la cartella di destinazione. Poi inserite nella sezione <head> del vostro sito web il seguente link:
<head>
<script type="text/javascript" src="path_per_file_jquery_/jquery.js"></script>
</head>Se invece decidete di posizionare il file esternamente, dovete adattare il riferimento nell’header in maniera corrispondente. Ad esempio, per usare il file jQuery su una delle librerie condivise di Google, inserite il seguente indirizzo web, inclusivo della versione (qui di seguito il link è quello della versione 3.0.0) come attributo src (source):
http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.jsCome impostare la sintassi di jQuery
Con il codice jQuery potete servirvi degli elementi HTML del vostro progetto. Scegliete questi elementi attraverso un selettore (selector), che si orienta sintatticamente ai selettori CSS. Di regola segue poi un’azione, che descrive in quale modo l’elemento selezionato dovrebbe essere modificato. Ai selettori e alle azioni viene anteposto il simbolo del dollaro ($), per contrassegnare il codice come funzione jQuery. Questo accade per evitare confusione nell’uso di diverse librerie. $() serve quindi come abbreviazione per la funzione jQuery(). La sintassi di base è la seguente:
$(selettore).azione()Una linea di codice indispensabile, che dovrebbe precedere ogni markup nel vostro documento HTML, è l’evento DOM Ready. Questo codice assicura che tutti i comandi jQuery lì contenuti vengano eseguiti solo dopo che tutti gli elementi HTML sono stati già caricati. Da un lato si evitano così avvisi di errore, quando ad esempio un elemento dovrebbe essere nascosto, cosa che prima non veniva affatto mostrata e dall’altro l’evento DOM Ready permette anche di incorporare il codice nella sezione <head>. La sintassi della linea di codice corrispondente segue il seguente schema:
<script type="text/javascript">
$(document).ready(function(){
//weiterer jQuery-Code
});
</script>I selettori più importanti
I selettori di jQuery sono gli elementi più importanti della libreria JavaScript. Con loro personalizzate i diversi elementi del vostro sito web. Quindi ci sono diversi tipi di selettori, che trovano e selezionano gli elementi HTML secondo diversi criteri come ID, classi, tipo ecc. Il selettore più usato assegna agli elementi HTML la rispettiva azione sulla base del loro nome. Così potete stabilire, ad esempio, che con il seguente codice jQuery, tutti gli elementi <p> (cioè quelli testuali, i paragrafi) si dissolvano quando un visitatore clicca su un pulsante:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>Un ulteriore e importante selettore jQuery è quello ID (#id). Con questo si mostra nel documento HTML un singolo elemento, che poi, ad esempio con JavaScript, può essere modificato completamente, analogamente a quanto accade con le manipolazioni nel CSS. Se non si vogliono far sparire tutti i blocchi di testo al clic di un utente su un pulsante qualsiasi, ma solo su uno ben specifico, aggiungete a questo elemento <p> un selettore ID (<p id=”bloccoditesto”>) e integrate il selettore dell’elemento attraverso ID nel codice di esempio sopra:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#bloccoditesto").hide();
});
});
</script>Un terzo selettore semplice è quello .class, che permette di selezionare preventivamente classi ben specifiche e si inserisce con il metodo già spiegato sopra. Ulteriori selettori utili sono:
| Selettore | Descrizione |
| $("*") | Seleziona tutti gli elementi |
| $(this) | Seleziona l’elemento in questione |
| $("p:first") | Seleziona il primo elemento <p> |
| $("ul li:first-child") | Sceglie di volta in volta il primo elemento della lista <li> di tutti gli elenchi <ul> disponibili |
| $("[href]") | Seleziona tutti gli elementi con attributo href |
| $("tr:even") | Seleziona tutte le righe delle tabelle pari |
| $("tr:odd") | Seleziona tutte le righe delle tabelle dispari |
| $("p.intro") | Seleziona tutti gli elementi <p> con la classe class=“intro“ |
Reagire con jQuery agli eventi generati dagli utenti
Il visitatore di un sito o l’utente di un’applicazione web interagiscono in molti e diversi modi con il vostro sito web, cliccando con il mouse, inserendo un comando da tastiera, compilando un modulo o ingrandendo una finestra. Questi eventi sono conosciuti anche come eventi DOM e sono i “detonatori” dell’azione.
Per esempio, un movimento del puntatore del mouse può diventare la causa di un evento. Questo si ottiene con mouseenter() e mouseleave(): la prima funzione si attiva quando l’utente passa con il puntatore del mouse sopra l’elemento HTML selezionato, la seconda quando il puntatore del mouse si sposta dall’elemento. Il seguente codice jQuery provoca come effetto il fatto che l’utente venga avvertito da una finestra di dialogo quando il suo mouse punta un preciso blocco di testo:
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
alert("Sie haben einen Textblock ausgewählt!");
});
});
</script>Altre azioni importanti che si possono provocare sono:
| Azione | Descrizione |
| focus() | Si attiva quando si seleziona un elemento (cliccando con il mouse o premendo il tasto TAB della tastiera) |
| blur() | Si attiva quando non si seleziona più un elemento |
| keydown() | Si attiva quando si preme e si tiene premuto un tasto |
| keyup() | Si attiva quando si rilascia il tasto |
| change() | Si attiva quando si effettua un inserimento da tastiera o si fa una selezione |
| scroll() | Si attiva quando si scorre sull’elemento selezionato |
| select() | Si attiva quando si evidenzia un testo nel campo di input di un modulo selezionato |
Con l’aiuto di on() potete inoltre aggiungere più effetti a un elemento selezionato e combinare così senza problemi diversi eventi. Con il seguente codice jQuery ad esempio ottenete che i colori di sfondo dell’elemento <p> si possano modificare, quando il visitatore li seleziona (blue), e anche quando li rilascia (red) o quando li clicca di nuovo (yellow):
<script type="text/javascript">
$("p").on({
mouseenter: function(){
$(this).css("background-color", "blue");
},
mouseleave: function(){
$(this).css("background-color", "red");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
</script>Per una panoramica dettagliata sulle numerose funzioni della libreria JavaScript, anche in relazione alla tecnica Ajax, vi consigliamo il tutorial in inglese su w3schools.com, che mette a disposizione un grande numero di codici di esempio per jQuery.
