jQuery è una libreria Ja­va­Script, svi­lup­pa­ta dall’americano John Resig e ri­la­scia­ta nel 2006 con licenza libera. La libreria offre mol­tis­si­me opzioni, dalla ma­ni­po­la­zio­ne HTML e degli stili CSS, al controllo degli eventi, fino all’ac­ce­le­ra­zio­ne delle fun­zio­na­li­tà Ajax. Le numerose opzioni si possono usare in maniera semplice, in­cor­po­ran­do jQuery nel codice sorgete HTML del ri­spet­ti­vo sito web e co­man­dan­do­le con l’aiuto di funzioni. jQuery è già integrato in molti CMS e framework come Joomla, WordPress e MediaWiki, di­stin­guen­do­si non solo per le numerose funzioni, ma anche per la grande community e i sempre nuovi ag­gior­na­men­ti, che sono di com­pe­ten­za del team di jQuery.

Cosa si nasconde dietro a jQuery: le pos­si­bi­li­tà della libreria

jQuery sem­pli­fi­ca in maniera con­si­de­re­vo­le la pro­gram­ma­zio­ne grazie al lin­guag­gio di scripting dinamico Ja­va­Script. L’intera libreria jQuery consiste quindi in un unico file Ja­va­Script, 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 mo­di­fi­ca­ti gli elementi del progetto. Così ad esempio scegliete gli oggetti e mo­di­fi­ca­te il loro aspetto (colore, posizione ecc.), cosa che teo­ri­ca­men­te è possibile anche con Ja­va­Script, ma che richiede molto più lavoro.  

Inoltre con jQuery potete reagire in maniera mirata alle azioni dei vostri utenti, grazie alla pro­gram­ma­zio­ne a eventi degli elementi della pagina. Gli utenti provocano risultati stabiliti in pre­ce­den­za con il puntatore del mouse o inserendo un testo e ottengono così i contenuti de­si­de­ra­ti o ani­ma­zio­ni. Anche gli effetti grafici come testi in so­vrap­po­si­zio­ne o altri sono inseriti ve­lo­ce­men­te e solo con una riga di codice. Inoltre jQuery sem­pli­fi­ca il lavoro con Ajax: la libreria ottimizza la tec­no­lo­gia che carica nel back­ground in tempo reale i contenuti della pagina e che presenta in un’in­ter­fac­cia 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 im­ple­men­ta­zio­ni Ja­va­Script nei singoli browser.

jQuery: ampliare la struttura di base con i plug-in

Che l’uso di jQuery sia in­te­res­san­te per i siti web, dipende prin­ci­pal­men­te dalla semplice am­plia­bi­li­tà della libreria Ja­va­Script. Migliaia di plug-in, che sem­pli­fi­ca­no ul­te­rior­men­te la pro­gram­ma­zio­ne e mi­glio­ra­no jQuery ancora di più, sono di­spo­ni­bi­li per il download (in gran parte gratuito) sul sito web ufficiale di jQuery. La grande dif­fu­sio­ne e la community am­pia­men­te di­ver­si­fi­ca­ta della libreria, che hanno un ruolo centrale nella dif­fu­sio­ne di queste esten­sio­ni, as­si­cu­ra­no dei buoni risultati. Se la funzione de­si­de­ra­ta non è di­spo­ni­bi­le tra quelle standard e neanche come plug-in, gli svi­lup­pa­to­ri esperti possono anche provare a creare una propria esten­sio­ne. 

Come integrare la libreria Ja­va­Script

Per poter usare jQuery per il proprio progetto, prima di tutto dovete in­cor­po­rar­lo nella libreria. Per farlo avete la pos­si­bi­li­tà di hostare il file Ja­va­Script sul vostro spazio web o di inserire un link ad uno spazio web esterno. Se siete in­te­res­sa­ti alla prima variante, trovate il file nella pagina dedicata ai download sul sito di jQuery. Lì potete scegliere tra la versione com­pres­sed, pro­duc­tion jQuery e quella un­com­pres­sed, de­ve­lo­p­ment jQuery. Per salvare in locale il file scelto, cliccate sem­pli­ce­men­te con il tasto destro del mouse sul link, scegliete “Salva con nome” e la cartella di de­sti­na­zio­ne. 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 po­si­zio­na­re il file ester­na­men­te, dovete adattare il ri­fe­ri­men­to nell’header in maniera cor­ri­spon­den­te. 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.js

Come impostare la sintassi di jQuery

Con il codice jQuery potete servirvi degli elementi HTML del vostro progetto. Scegliete questi elementi at­tra­ver­so un selettore (selector), che si orienta sin­tat­ti­ca­men­te ai selettori CSS. Di regola segue poi un’azione, che descrive in quale modo l’elemento se­le­zio­na­to dovrebbe essere mo­di­fi­ca­to. Ai selettori e alle azioni viene anteposto il simbolo del dollaro ($), per con­tras­se­gna­re il codice come funzione jQuery. Questo accade per evitare con­fu­sio­ne nell’uso di diverse librerie. $() serve quindi come ab­bre­via­zio­ne per la funzione jQuery(). La sintassi di base è la seguente: 

$(selettore).azione()

Una linea di codice in­di­spen­sa­bi­le, 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 in­cor­po­ra­re il codice nella sezione <head>. La sintassi della linea di codice cor­ri­spon­den­te segue il seguente schema: 

<script type="text/javascript">
    $(document).ready(function(){
        //weiterer jQuery-Code
    });
</script>

I selettori più im­por­tan­ti

I selettori di jQuery sono gli elementi più im­por­tan­ti della libreria Ja­va­Script. Con loro per­so­na­liz­za­te i diversi elementi del vostro sito web. Quindi ci sono diversi tipi di selettori, che trovano e se­le­zio­na­no gli elementi HTML secondo diversi criteri come ID, classi, tipo ecc. Il selettore più usato assegna agli elementi HTML la ri­spet­ti­va 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 dis­sol­va­no quando un vi­si­ta­to­re clicca su un pulsante:

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide();
        });
    });
</script>

Un ulteriore e im­por­tan­te selettore jQuery è quello ID (#id). Con questo si mostra nel documento HTML un singolo elemento, che poi, ad esempio con Ja­va­Script, può essere mo­di­fi­ca­to com­ple­ta­men­te, ana­lo­ga­men­te a quanto accade con le ma­ni­po­la­zio­ni 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, ag­giun­ge­te a questo elemento <p> un selettore ID (<p id=”bloc­co­di­te­sto”>) e integrate il selettore dell’elemento at­tra­ver­so 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 se­le­zio­na­re pre­ven­ti­va­men­te classi ben spe­ci­fi­che e si inserisce con il metodo già spiegato sopra. Ulteriori selettori utili sono:

Selettore De­scri­zio­ne
$("*") 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> di­spo­ni­bi­li
$("[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 vi­si­ta­to­re di un sito o l’utente di un’ap­pli­ca­zio­ne web in­te­ra­gi­sco­no in molti e diversi modi con il vostro sito web, cliccando con il mouse, inserendo un comando da tastiera, com­pi­lan­do un modulo o in­gran­den­do una finestra. Questi eventi sono co­no­sciu­ti anche come eventi DOM e sono i “de­to­na­to­ri” dell’azione.

Per esempio, un movimento del puntatore del mouse può diventare la causa di un evento. Questo si ottiene con mou­seen­ter() e mou­se­lea­ve(): la prima funzione si attiva quando l’utente passa con il puntatore del mouse sopra l’elemento HTML se­le­zio­na­to, 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 im­por­tan­ti che si possono provocare sono:

Azione De­scri­zio­ne
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 in­se­ri­men­to da tastiera o si fa una selezione
scroll() Si attiva quando si scorre sull’elemento se­le­zio­na­to
select() Si attiva quando si evidenzia un testo nel campo di input di un modulo se­le­zio­na­to

Con l’aiuto di on() potete inoltre ag­giun­ge­re più effetti a un elemento se­le­zio­na­to 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 mo­di­fi­ca­re, quando il vi­si­ta­to­re 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 pa­no­ra­mi­ca det­ta­glia­ta sulle numerose funzioni della libreria Ja­va­Script, anche in relazione alla tecnica Ajax, vi con­si­glia­mo il tutorial in inglese su w3schools.com, che mette a di­spo­si­zio­ne un grande numero di codici di esempio per jQuery.

Vai al menu prin­ci­pa­le