JQuery è una file JavaScript: una libreria di funzioni con cui selezionare e manipolare agilmente gli elementi delle nostre pagine Html via CSS e gestire eventi.
Non c’è niente in JQuery che non possa esser fatto usando semplicemente codice JavaScript, ciò non di meno, questa libreria è estremamente popolare tra gli sviluppatori web per tre ragioni fondamentali:
- Semplifica notevolmente il modo di selezionare elementi del DOM (Document Object Model), vale a dire tutti gli elementi che compongono a livello strutturale un documento Html.
- Ci mette a disposizione decine e decine di funzioni preconfezionate che ci consentono di risparmiare righe su righe di codice.
- Offre un’ottima compatibilità cross-browser.
Cominciare ad utilizzare JQuery è semplice. Per prima cosa dobbiamo includere la libreria nella pagina Html, aggiungendo il seguente codice:
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
Questo breve script ci apre le porte ad una pletora di funzioni in grado di semplificarci notevolmente la vita (di sviluppatori web). Se, ad esempio, per selezionare elementi appartenenti ad una determinata classe CSS chiamata “miaClasse”, in JavaScript, avremmmo dovuto scrivere:
document.getElementsByClassName('miaClasse');
Grazie a JQuery possiamo ottenere lo stesso risultato semplicemente scrivendo:
$('.miaClasse');
Quella qua sopra non è altro che una funzione chiamata jQuery, scritta in modo fancy: anzichè scrivere “jQuery()”, per brevità e convenzione, viene usato il simbolo del dollaro “$”. Lo scopo di questa funzione è di creare un oggetto JQuery. L’unico parametro richiesto è il selettore CSS a cui volete far riferimento: una Classe, un ID, un Tag Html. Dovete semplicemente dire a JQuery dove puntare, ricordandovi di includere il punto, prima del nome di una classe, oppure il cancelletto, prima del nome che avete dato al vostro ID. Se volete, potete immagazzinare la funzione in una variabile che, per convenzione, gli sviluppatori nominano con il simbolo $ all’inizio del nome, in modo da rendere evidente che si tratta di una variabile che contiene un certo tipo di valore.
var $laMiaClasse = $('.miaClasse');
var $ilMioID = $('#mioID');
var $ilMioTagHtml = $('h1');
Prima di iniziare ad armeggiare con JQuery c’è però ancora un passo da fare: dobbiamo assicurarci che la nostra pagina Html sia pronta all’uso. Compito che lasciamo svolgere ad una funzione ad hoc che includeremo nel nostro codice JavaScript:
$(document).ready(laMiaFunzione);
Quando il documento è pronto (ie. quando tutto quello che dobbiamo caricare è stato caricato), JQuery richiama una funzione da me indicata, deputata alla gestione del codice che fa uso della libreria che dovrà quindi essere contenuto in questa funzione.
Bene. Adesso possiamo cominciare ad applicare agli elementi che vogliamo selezionare, tutti i metodi che JQuery ci mette a disposizione (e sono tanti, ma tanti tanti). Uno di questi è il metodo “hide“, che serve a nascondere un elemento. Per utilizzarlo basta abbinarlo all’elemento che abbiamo selezionato, tramite la cosiddetta “dot syntax” (sintassi del punto):
$('#mioID').hide(); // se utilizzate direttamente la funzione jQuery
$ilMioID.hide(); // se avete usato una variabile
Dietro le quinte, JQuery ha aggiunto una proprietà CSS “display : none” all’elemento contraddistinto dall’identificativo “#mioID”.
Ponendo di avere una classe dedicata ai pulsanti del nostro sito, chiamata “buttonClass”, tramite JQuery protremmo abbinare ad ogni pulsante una funzione che risponda ad un evento da parte dell’utente, come il click del mouse, in questo modo:
$('.buttonClass').on('click, function() {
console.log("un pulsante è stato cliccato!");
});
Sappiamo che un pulsante è stato cliccato, sarebbe anche bello poter sapere quale, in modo da poter programmare azioni diverse a seconda del pulsante. Ma come? Ecco che una delle parole chiave di JavaScript ci viene in soccoro: “this“, che ci permette di accedere all’elemento corrente. Possiamo ad esempio cambiare lo stato del pulsante su cui l’utente ha cliccato, utilizzando “toggleClass” un’altro dei metodi che JQuery ci mette a disposizione, scrivendo:
$('.buttonClass').on('click, function() {
$(this).toggleClass('active');
});
A questo punto potremmo anche voler cambiare il contenuto testuale de paragrafo appena sotto il nostro pulsante. Niente di più facile, grazie al metodo “next” ed al metodo “text“.
$('.buttonClass').on('click, function() {
$(this).toggleClass('active');
$(this).next().text('il pulsante qua sopra è stato cliccato!');
});
E potremmo andare avanti all’infinito, utilizzando innumerevoli altri metodi della libreria per aggiungere animazioni, effetti, filtri, per cambiare immagine, forma e dimensione a qualsiasi elemento Html presente nelle pagine del nostro sito web, ma questa voleva essere solo una brevissima introduzione a JQuery su cui sono stati scritti interi libri ed a cui sono dedicati dettagliatissimi tutorial video su cui, chi vuole, può approfondire l’argomento. Personalmente, se può tornarvi comoda anche una guida di riferimento a JavaScript, vi suggerisco il sempre ottimo “JavaScript & JQuery“, celebre libro di Jon Duckett, recentemente tradotto in Italiano ed edito da Apogeo. Un bel malloppo di oltre 600 pagine che però si legge come un numero di Wired. Abbinabile al gemello, dedicato a Html e CSS ed intitolato “Html & CSS” per l’appunto.
