Guida jQuery

Write less, do more

Introduzione

jQuery è uno dei più popolari framework JavaScript, spesso considerato indispensabile da molti sviluppatori web.
Framework non è altro che un insieme di metodi e proprietà grazie ai quali lo sviluppatore può creare applicativi in grado di compiere operazioni complesse in modo più semplice e scrivendo meno codice

Storia

jQuery, un framework sviluppato da John Resig a partire dal 2006 con il preciso intento di rendere il codice più sintetico e di limitare al minimo l’estensione degli oggetti globali per ottenere la massima compatibilità con altre librerie.

Tra i punti di forza di jQuery è necessario segnalare la sua elevata compatibilità con praticamente tutti i browser in circolazione (jQuery è completamente cross-browser!) e la sua capacità di lavorare in simultanea con altre librerie senza creare conflitti. Il motto di jQuery è "write less, do more" che, come si intuisce, sottolinea in modo molto diretto sia la semplicità che la potenza di questo framework.

Implementare jQuery

La prima cosa da fare è scaricare l'ultima versione del framework dal sito ufficiale. Una volta scaricata la libreria sarà necessario includerla all'interno della nostra pagina web tra i tag <head> e </head>:

<script src="jquery.js"></script>

Oppure, senza scaricare il package, includere un riferimento alla libreria hostata in remoto sul sito ufficiale del progetto: qui

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>

La Sintassi

Tutto ciò che possiamo fare con jQuery gira intorno all’oggetto/funzione $, il cui utilizzo più comune è quello di selettore CSS:
var element = $('#mioId');

Che in JavaScript puro equivale a:
var element = document.getElementById('mioId');

La sintassi di jQuery è stata pensata per rendere semplice la selezione di un elemento del DOM e associargli una azione
Quindi abbiamo:

  • $ o jQuery servono per indicare che stiamo utilizzando una funzionalità creata in jQuery
  • Selector è la query che ci permette di selezionare un elemento/i del DOM (come con CSS)
  • Action una delle possibili “azioni” che jQuery ci permette di utilizzare
$('selector').action();

I selettori

Una delle feature più importante di jQuery, come già detto, è il motore di selezione basato su Sizzle (un motore per i selettori CSS utilizzato anche da altri framework)

  • $('p').action(); Seleziona tutti i paragrafi del HTML
  • $('p.intro').action(); Seleziona tutti i paragrafi con classe .intro
  • $('p:first-child').action(); Seleziona il primo paragrafo del HTML
  • $('[href]').action(); Seleziona tutti elementi con attributo href

Creare nuovi elementi

Un'altra interessante funzionalità offerta da jQuery è quella di poter aggiungere con facilità degli elementi al DOM.

var blocco = $("<div><p>Nuovo elemento</p></div>");

Per aggiungere l'elemento appena creato alla nostra pagina sarà sufficiente "appenderlo" nel punto desiderato mediante il metodo appendTo:

blocco.appendTo("#contenitore");

Le azioni

Le azioni indicano cosa accadrà all’elemento selezionato con il selector.
Ci sono cintinaia disponibili, ecco qualche esempio:

  • $('selector').addClass('classe');; aggiunge la classe “nomeclasse” all’elemento selezionato
  • $('selector').removeClass('classe'); rimuove la classe nomeClasse dal elemento selezionato
  • $('selector').hasClass(); utilizzato delle strrutture condizionale(if else), esito: true o false
  • $('selector').hide(); nasconde un elemento (display: none;)
  • $('selector').show(); mostra l'elemento (display: block)
  • $('selector').click(); associa ad un click una funzione

Gli Eventi

jQuery offre un accesso ancora più semplice agli eventi che JavaScript offre.

Document ready

Uno degli eventi più utilizzati, indica che lo script deve essere eseguito al completmento della pagina html

$(document).ready(function() { // tutto il codice });

Mouse Events

Sono gli eventi che vengono azionati con il mouse

  • $('#myButton').click(); Click sull'id myButton
  • $('#myButton').dblclick(); Doppio Click sull'id myButton
  • $('#mySquare').mouseenter(); Quando il mouse "entra" nel quadrato
  • $('#mySquare').mouseleave(); Quando il mouse "esce" nel quadrato
  • $('#mySquare').hover(); combinazione tra mouseenter e mouseleave

Keyboard events

Gli eventi della tastiera

  • $('input[text]').keyup(); si attiva all'rilascio del testo
  • $('input[text]').keydown(); si attiva quando il tasto è stato premuto
  • $('input[text]').keypress(); si attiva quando il tasto è piggiato

Ogni tasto della tastiera corrisponde ad un numero, ad esempio 13 - corrisponde all'invio (tasto ENTER).
Tutti i numeri della tastiera: qui

$('selector').keypress(function(event) {   if(event.which === 13) {     // codice da eseguire   } });

Form Events

Gli eventi del form

  • $('selector').submit(); evento al click sul tasto submit
  • $('selector').change(); evento al cambiamento del form select
  • $('selector').focus(); evento equivalente al ::focus css
  • $('selector').blur(); evento eseguito quando il campo perde il focus

Metodo on()
Questo metodo è particolarmente efficace per applicare gli eventi ai contenuti generati dinamicamente!

$('selector').on('click', function() {   // codice da eseguire }); // Eventi multipli $("p").on({   mouseenter: function(){     $(this).css("background-color", "lightgray");   },   mouseleave: function(){     $(this).css("background-color", "lightblue");   },   click: function(){     $(this).css("background-color", "yellow");   } });

Gli Effetti

Gli effetti che possiamo applicare con jQuery

La keyword "toggle"

Toggle è una keyword che troveremo associata a molti metodi jQuery e che ci permetterà di utilizzare due metodi opposti senza dover fare ulteriori check.

Ecco alcuni esempi di metodi che accettano il toggle:

  • $('button').toggle(); unisce show e hide
  • $('selector').slideToggle(); tipo faq
  • $('selector').fadeToggle(); con transition
  • $('selector').toggleClass(); aggiunge/rimuove una classe css

Show e Hide

Sono effetti che ci permettono di rendere visibile o invisibile un elemento. Possono essere utilizzati in 3 modi diversi, passando alla funzione 0, 1 o 2 argomenti

  • 1 metodo: Senza argomento
    • $('button').show();
    • $('button').hide();
  • 2 metodo: Passo come argomento la durata dell’effetto in ms o con una keyword come “slow” o “fast”.
    • $('button').show(2000); 2000 equivale a 2 secondi
    • $('button').hide('fast');
  • 3 metodo: Posso, oltre alla durata, anche una funzione di callback che verrà invocata alla fine dell’effetto.
    Può essere sia una funzione "tradizionale", sia una funziona anonima.
    • $('button').show(2000, function () {/*code*/ }); funzine anonima
    • $('button').hide(2000, myFunction); funzione "tradizionale"

Fade-in e Fade-out

Un’altro metodo per giocare con la visibilità degli elementi. Possono essere utilizzati in 3 modi diversi, passando alla funzione 0, 1 o 2 argomenti argomenti

  • 1 metodo: Senza argomento
    • $('button').fadeIn();
    • $('button').fadeOut();
  • 2 metodo: Passo come argomento la durata dell’effetto in ms o con una keyword come “slow” o “fast”.
    • $('button').fadeIn(2000);
    • $('button').fadeOut('fast');
  • 3 metodo: Passo, oltre alla durata, anche una funzione di callback che verrà invocata alla fine dell’effetto.
    Può essere sia una funzione "tradizionale", sia una funziona anonima.
    • $('button').fadeIn(2000, function () {/*code*/ }); funzine anonima
    • $('button').fadeOut(2000, myFunction); funzione "tradizionale"

Efetto Slide

jQuery crea per noi anche l’effetto slide che può essere richiamato in maniera molto simile all’effetto fade passando come parametri opzionali la durata e una funzione di callback.

  • slideDown setterà il display su block di un selettore aggiungendo una transizione che farà cadere dall’alto l’elemento
  • slideUp setterà il display su none facendo scomparire in alto l’elemento.
  • slideToggle farà uno slideDown qualora l’elemento sia hidden e slideUp qualora fosse block.
$('button').slideToggle(500, function () {    // codice da eseguire });

Funzioni di callback

Come abbiamo visto precedentemente, quando utilizziamo un effetto, abbiamo sempre la possibilità di associare una funzione di callback.

La funzione di callback verrà eseguita una volta che l’effetto è stato completato al 100%.

// Partirà un alert una volta che un testo è completamente nascosto. $('.text').hide(1000, function () {   alert('Testo nascosto'); });

L’utilizzo di this

Spesso potremmo dover intercettare il click o un qualsiasi altro evento associato ad una classe.

Non essendo un id e quindi interagendo con un selettore che si riferisce a diversi elementi potremmo aver bisogno di utilizzare this.

La keyword this identifica per noi l’esatto componente che è stato ad esempio cliccato.

$('.buttons').click(function () {   $(this).hide(); // nascondiamo esattamente il bottone che l’utente ha cliccato });

Manipolazione del DOM

Con dei metodi molto semplici che ci offre jQuery, possimao manipolare il DOM modificando l’html, il text o le value di un selettore o leggere gli attributi di un selettore. Muoversi all'interno del DOM

  • text() Cambia o ritorna il testo di un selettore
  • html() Cambia o ritorna l’html di un selettore, incluso il markup (<tag> html)
  • val() Cambia o ritorna il valore di un form input
  • attr() Cambia o ritorna i valori di un attributo di un selettore.


text() e val() possono essere utilizzati con o senza parametro. Senza parametro - lettura. Con il parametro - modifica.

// senza parametro restituiscono il valore attuale $('.text').text(); // lettura del testo // con parametro modificano il valore $('.text').text('Nuovo testo'); // modifica del testo


attr() invece necessita di un primo parametro che indica l’attributo da leggere e un secondo per la modifica.

$('.link').attr('href'); // lettura del href $('.text').attr('href', 'http://newHref.it'); // scrittura del nuovo href

Possiamo modificare anche più attributi insieme (come oggetto js):

$('.selector').attr({   'href': 'http://myhref.it',   'Title': 'Nuovo Titolo' });

Concatenare delle funzioni

Possiamo anche concatenare diverse funzioni per rendere il codice più compatto.

// cambiamo il testo di un p, cambiamo il colore al testo ($('p').html('Ciao')).css('color', 'red');

Metodo CSS

Modifichiamo o leggiamo le regole css di un selettore.

$('.square').css('background'); // lettura della regola css background $('.square').css('background', 'red'); // scrittura del nuovo valore background

Navigare nel DOM

jQuery mette a disposizione numerosi metodi per muoversi all'interno di un documento effettuando ricerche all'interno di un elemento oppure sfruttando legami di tipo padre-figlio e così via.

  • $('.index').children() seleziona figlio diretto del index
  • $('.index').find('selettore') permette di selezionare gli elementi contenuti all'interno del index $('.index').find('p').hide();
  • $('.index').siblings() seleziona tutti elementi fratelli
  • $('.index').siblings('selettore') seleziona elementi fratelli con selettore selezionato
  • $('.index').parent() seleziona il genitore diretto dell'elemento index
  • $('.index').parents() eleziona il genitore a qualsiasi livello dell'elemento index
  • $('.index').closest() parte dall'elemento corrente e restituisce sempre un solo elemento - quello più vicino
  • $('.index').next(), .nextAll(), .prev(), .prevAll() questi metodi servono per selezionare gli elementi successivi e precedenti a quello selezionato.

Metodo append()

E' possibile aggiungere un elemento alla fine dell’elemento selezionato con il metodo append()

$('#append-output').append('<h3>Ciao, sono Append</h3>');

OUTPUT:

Altri metodi:

  • prepend() aggiunge elemento all'inizio
  • prependTo('selector')
  • prependTo('selector')

Metodo .each()

Il metodo .each() è utilizzato per iterare un oggetto jQuery contenente una selezione di elementi del DOM. Il metodo in oggetto pretende come parametro una funzione di callback alla quale vengono passati i vari item presenti all'interno dell'oggetto.

Ad esempio: aggiungiamo il target "_blank" a tutti i link con classe sponsor:

// ciclo tutti i link selezionati $('#menu a').each(function() {   // verifico che abbiano la classe sponsor   if ($(this).hasClass('.sponsor')) {     // in caso affermativo aggiungo l'attributo target con valore "_blank"     $(this).attr('target','_blank');   } });

la keyword this ci si riferisce all'oggetto corrente. All'interno del loop $(this) è utilizzato per fare riferimento ad ogni singolo link ciclato.

Chiamata AJAX

jQuery migliora e facilita la creazione di una chiamata Ajax.
$.ajax è un metodo di jQuery che richiede come argomento un oggetto che può avere molte opzioni.

I parametri di base di una chiamata AJAX sono:

  • url: l’indirizzo al quale inviare la chiamata
  • method: tipo di operazione richiesta dal client
  • success: funzione da lanciare se la richiesta ha successo. Accetta come argomenti i dati restituiti dal server (interpretati di default come html o xml) e lo stato della chiamata
  • error: funzione lanciata in caso di errore. Accetta un riferimento alla chiamata XMLHttpRequest, il suo stato ed eventuali errori notificati

Ecco l'esempio di un chiamata ajax:

$.ajax(   {     url: "http://www.sito.com/api/random/",     method: "GET",     success: function (data, stato) {       console.log(data);     },     error: function (richiesta, stato, errore) {       alert("E' avvenuto un errore. " + errore);     }   } );