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.