Che cos’è jQuery? una libreria JavaScript creata per scrivere meno codice: scopri come in questo articolo! Detto in parole molto semplici, jQuery è una libreria JavaScript creata per scrivere meno codice.
Ovviamente la definizione sopra è molto succinta e poco tecnichese come piace a noi, tuttavia è giusto approfondire il tutto.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Che cos’è jQuery e a che cosa serve
jQuery permette la manipolazione di qualsiasi elemento HTML all’interno della pagina web stessa.
jQuery serve a gestire qualsiasi evento all’interno della pagina web.
jQuery dà la possibilità di gestire animazioni e invocazioni ad API in poche semplici righe.
Facciamo degli esempi concreti
Abbiamo un bottone così strutturato:
<button id=”bottone”>Cliccami</button>
Per modificare il contenuto del bottone e sostituire la parola “Cliccami” con “Clicca qui”, in JavaScript avremmo dovuto scrivere:
document.getElementById(“bottone”).innerHTML=”Clicca qui”;
Con jQuery invece:
$(“#bottone”).html(“Clicca qui”);
Molto più semplice e pulito vero? Ma andiamo oltre!
Vogliamo eseguire una chiamata ad un’API il cui indirizzo è “https://www.informatico.it”, voglia un parametro nominato “parametro1” e quando otteniamo una risposta, questa venga messo dentro un tag “p” che ha come id “paragrafo”.
$.ajax({
url: "https://www.informatico.it",
data: {
parametro1: “valoreParametro”;
},
success: function( result ) {
$( "#paragrafo" ).html( result );
}
});
Quanto ci abbiamo messo? Poco meno di 30 secondi?
Come fa jQuery a capire su quale tag HTML agire
Parliamo del selettore di jQuery, ovvero il carattere “$”.
Generalmente tutte le funzionalità di jQuery sull’HTML funzionano così:
$(selettore).funzione();
Il selettore di jQuery
Ovviamente il carattere “$” non basta! Bisogna specificare su quale elemento HTML agire, abbiamo tre modi diversi:
- Tag semplice: inserendo il tag specifico, agiremo sullo stesso senza altre specifiche, ad esempio scrivendo:
$(“p”).html(“ciao”);
Agiremo sul tag HTML “p” scrivendo al suo interno la parola “ciao”. - id: aggiungendo invece un cancelletto, ovvero “#” potremo agire su un elemento HTML specifico in base al suo ID. Ad esempio:
$(“#bottone”).html(“ciao”);
Scriverà “ciao” all’interno dell’elemento HTML che ha come ID “bottone”. - Classe: aggiungendo un punto “.” invece, agiremo sull’elemento HTML che ha la specifica classe CSS. Ad esempio:
$(“.azzurro”).html(“ciao”);
Agiremo sul tag HTML che ha come classe CSS “azzurro”.
Ma andiamo oltre!
Come modificare la classe CSS di un elemento HTML con jQuery
Abbiamo le seguenti classi CSS:
.rosso{
background-color: red;
}
.azzurro{
background-color: lightblue;
}
e un tag HTML strutturato così:
<div class=”rosso”> Ciao </div>
Se volessimo associargli la classe CSS “azzurro” rimuovere di fatto la classe “rosso”, ci basta fare questo:
$(“div”).removeClass(“rosso”);
$(“div”).addClass(“azzurro”);
Ovviamente bisogna fare attenzione perché utilizzando il selettore “$” che permette di usare tutte queste magie di jQuery agirà su tutti i tag “DIV” presenti sulla pagina web!
Potete notare però quanto sia comodo e potente rispetto a JavaScript tradizionale!
E parlando di Javascript tradizionale, lo sapevi che il mio blog offre un’intera categoria di articoli in merito?
La puoi trovare a distanza di un click esattamente qui.
Come integrare jQuery sul proprio sito web
jQuery ovviamente va integrato sulle pagine web in cui siamo intenzionati a utilizzarlo, naturalmente possiamo farlo attraverso un CDN, oppure scaricandolo dal sito web ufficiale e integrarlo direttamente come riferimento attraverso il tag script.
jQuery funziona su tutti i browser
Allo stato attuale, jQuery funziona su tutti i browser e su tutti i dispositivi nonché su dispositivi mobile.
jQuery si è evoluto di molto nel tempo ed è ormai compatibile con qualsiasi dispositivo dotato di navigazione sul web 🙂
Ora che abbiamo scoperto che cos’è jQuery, a che cosa serve e come funziona, direi che ti resta solo da sperimentarne le funzionalità!
