jQuery è un progetto nato dall’idea di John Resig, che cercava un modo semplice per utilizzare le funzionalità del linguaggio Javascript sfruttando i selettori CSS. Il suo obiettivo era quello di semplificare la programmazione informatica Lato Client in modo da evitare la scrittura di codice verboso e difficile da mantenere. Un altro dei suoi obiettivi era quello di uniformare i vari browser all’utilizzo di Javascript, dati i grossi problemi di compatibilità che esistevano all’epoca.
La prima release ufficiale di jQuery risale al 2006 e da allora ha avuto un grande successo portandolo ad essere scelto ed utilizzato per un numero sempre maggiore di progetti, grazie alla facile curva di apprendimento e al funzionamento intuitivo. Potete dare un’occhiata alla storia di jQuery sul suo sito ufficiale.
Perché jQuery?
Il motto di jQuery “write less, do more”, che potremmo tradurre letteralmente come “scrivi meno, fai di più”, descrive la filosofia dietro questa libreria.
Attraverso le funzionalità di jQuery è possibile manipolare gli elementi del DOM, agendo direttamente su di esso con pochissime righe di codice, creare animazioni, gestire eventi e sfruttare l’enorme numero di Plugin esistenti per implementare tutto ciò che si desidera.
Per poter utilizzare jQuery è necessario includere la libreria nel proprio progetto; questo può avvenire in due modi:
- Attraverso l’uso di una CDN (Content Delivery Network), ossia di un link che punta direttamente alla libreria;
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>- Includerla localmente, scaricando i sorgenti dal sito ufficiale, per poi linkarla ai nostri file HTML;
<head>
<script src="/jquery/jquery-3.4.1.min.js"></script>
</head>Una volta inclusa, jQuery andrà a salvarsi sull’oggetto globale window, in modo da essere accessibile in qualsiasi punto dell’applicativo.
Per verificare ciò, vi basterà aprire la console del browser, digitare la keyword jQuery e premere invio.
Nel seguente esempio incolliamo l’intero codice sorgente di jQuery, preso dal sito ufficiale, e attuiamo la verifica descritta sopra.
N.B.Incollare il codice nella console del browser porta allo stesso risultato di un semplice import nell’HTML:
Da questo momento è possibile iniziare ad usare le sue funzionalità, ad esempio sfruttando i selettori. Per poterli usare bisogna digitare il segno del dollaro $ seguito da delle parentesi tonde: $(), questo è un shorthand per la funzione jQuery().
Dentro le parentesi, come parametro, passeremo l’elemento che ci interessa ricercare e successivamente chiameremo il metodo da applicare.
L’elemento può essere ricercato con gli stessi selettori che avremmo usato per scrivere del codice CSS. Ad esempio per selezionare l’elemento o gli elementi con una determinata classe css passeremo come parametro il nome della classe preceduto da un punto: $(‘.someCssClass’). Se volessimo sfruttare l’ID useremo il simbolo cancelletto: $(‘#someID’).
Esempi di selettori jQuery
Ricerca con una classe CSS:
<h2 class="subtitle">h2 con classe subtitle</h2>
Selettore jQuery:
$(".subtitle").css("color", "red"); // colora di rosso il contenuto
Nel caso in cui volessimo usare il selettore ID il codice non cambia di molto:
<h2 id="subtitle">h2 con id subtitle</h2>
Selettore jQuery:
$("#subtitle").css("color", "red");
Selettori più avanzati: i filtri
jQuery permette di sfruttare selettori molto più avanzati, consentendo di effettuare dei filtri; generalmente questi selettori iniziano con i due punti.
Supponiamo di voler selezionare il primo elemento di una lista:
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
Selettore jQuery:
$("li:first").css("color", "grey");
Molto simile è il caso in cui si volesse selezionare l’ultimo, in quel caso il selettore sarà :last.
Un altro selettore molto utile è il :contains, che cerca e seleziona gli elementi che contengono un certo testo:
<p>Hello World</p> <span>My name is John</span>
Selettore jQuery:
$("span:contains(John)").css("color", "red");
Questi sono solo alcuni degli esempi di selettori che mostrano la potenza di jQuery e la sua facilità di utilizzo. Tuttavia questa facilità porta con sé dei grossi rischi..
Rischi nell’utilizzo di jQuery
Come anticipato, l’utilizzo sfrenato di jQuery può portare ad appesantire eccessivamente l’applicativo, rendendolo a volte lento e scattoso.
Ogni selettore jQuery non fa altro che creare un puntatore sul browser, ossia una variabile che occupa spazio e che richiede energia computazionale per essere gestita.
Immaginate di lavorare in grossi progetti, con centinaia di selettori diversi tra di loro e di dover effettuare una modifica sullo stesso elemento, come nel codice seguente:
$("#title").show();
$("#title").addClass("someClass");
$("#title").addClass("anotherClass");
$("#title").on("click", function(){
//codice da eseguire…
});
//...
$("#title").find("ul > li > input[type=checkbox]").addClass("anotherClass");
In questo esempio ogni volta che richiamiamo l’elemento #title verrà creato un nuovo puntatore con possibili rallentamenti.. Sarebbe buona pratica creare delle variabili che salvino il riferimento a quell’elemento in modo da richiamarlo solo una volta, come in questo caso: var title = $(‛#title’);
Un’altra pratica molto comune fra gli utilizzatori jQuery è quella di aggiungere codice css con i metodi messi a disposizione, quindi generandolo run time con la libreria, trascurando totalmente il normale linguaggio HTML e CSS nel sorgente. Questa pratica, se abusata, porta ad appesantire il progetto, rallentandone i tempi di caricamento e danneggiando il posizionamento sui motori di ricerca, in quanto i browser avranno grosse difficoltà a reperire informazioni a loro utili poiché generate dinamicamente da jQuery.
Quindi, quando usarlo?
jQuery si presta tantissimo ad esser utilizzato per progetti di piccola-media grandezza, laddove si possono sfruttare i numerosi Plugin esistenti e la logica del progetto non tende a scalare fino a diventare molto complessa.
Nel caso in cui il progetto cominci a richiedere interazioni sempre più complesse con il server, e quindi una manipolazione di dati più efficiente, è consigliato sfruttare le molteplici librerie o frameworks javascript attualmente esistenti ed ottimizzati per tale scopo. Come ad esempio Vue.js, React o Angular, che sono ottimizzati per renderizzare e aggiornare costantemente i dati presenti nel DOM.
Uno sguardo al presente
Bisogna riconoscere che jQuery rimane largamente utilizzato da un grosso numero di programmatori informatici, nonostante gli enormi passi in avanti compiuti da JavaScript e dai passati problemi di compatibilità cross-browser. Questa popolarità la si deve alla sua facilità di utilizzo (bastano 10 minuti per capire come utilizzarlo), alla sintassi intuitiva e anche al fatto che è incorporato in alcuni dei più famosi CMS al mondo come WordPress e Drupal.
Nonostante i competitors di jQuery siano tanti – e spesso offrano performance migliori – e la sua eliminazione come dipendenza da altri famosi framework (vedi Bootstrap 5 che eliminando il supporto a internet explorer ha eliminato anche jQuery dalle sue dipendenze), questa libreria continua a sopravvivere e prima della sua uscita definitiva dal mercato ci vorrà ancora tanto tempo.
Abbiamo voluto darti un assaggio di jQuery, vuoi imparare come funziona un po’ più nel dettaglio? Scopri la nostra guida jQuery in italiano!
