Che cos’è jQuery

di Lorenzo Neri
0 commento 93 visualizzazioni

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.

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.test.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.test.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:

  1. 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”.

  2. 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”.

  3. 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!

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à!

Potrebbero interessarti

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più