1 – 2

Jquery è una libreria basata su Javascript che ci permette di ottenere con la massima efficienza operazioni che altrimenti risulterebbero complesse. È crossplatform, quindi si adatta a tutti i browser maggiormente noti e tramite la tecnologia Ajax permette una efficiente comunicazione col server. Per integrare Jquery, abbiamo 2 possibilità:

• Integrare la libreria dalla nostra cartella (avendola preventivamente prelevata)

src="query-3.2.1-jquery-min-js"

• includerla da un server remoto (Google è una buona risorsa)

src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

Vediamo il seguente codice HTML:

<p id="p1"> Primo paragrafo </p>
<p id="p2"> Secondo paragrafo </p>
<p id="p3"> Terzo paragrafo </p>
<p id="p4"> Come ti senti oggi? <br />
<input onclick="tristezza();" type="button" value="TRISTE">
<input type="button" value="ALLEGRO">
</p>

Adesso vogliamo colorare di grigio un paragrafo al click sul bottone. Prima vediamo la versione javascript:

<script type="text/javascript">
    function tristezza()
    {
        document.getElementById('p1').style.backgroundColor='gray';
    }
</script>

Abbiamo creato una funzione chiamata tristezza che recupera l’elemento con id p1 e imposta lo stile dello sfondo grigio.

Vediamo il comando jQuery che fa la stessa cosa:

function tristezza()
{
    $('#p1').css('background','gray');
}

Vediamo ora la differenza se devo colorare tutti i paragrafi,

Javascript:

var tuttiP = document.getElementsByTagName('p');
for (i=0; i<tuttiP.length; i++)
    tuttiP[i].style.backgroundColor='gray';

JQuery:

$('p').css('background','gray');

È notevole la differenza di lunghezza di codice tra le 2 versioni, anche su una cosa così banale come il colore di sfondo. Con il selettore $ e l’attributo ‘p’ seleziono tutti gli elementi con quell’id sostituendo l’intero ciclo for, tramite l’iterazione implicita presente in jQuery.

Aggiungiamo il colore al testo:

Javascript

var tuttiP = document.getElementsByTagName('p');
for (i=0; i<tuttiP.length; i++)
{
    tuttiP[i].style.backgroundColor='gray';
    tuttiP[i].style.color='blue';
}

Come si nota bisogna aggiungere una riga di codice e racchiudere le 2 righe tra parentesi graffe.

Jquery

$('p').css('background','gray').css('color','blue');

Neanche una riga in più, grazie al metodo chaining (concatenazione) di jQuery, rappresentato dal simbolo punto.