jQuery

jQuery ha due vantaggi principali:

  • superare uno dei problemi che maggiormente complica la vita agli sviluppatori: la compatibilità tra le varie versioni dei browser
  • rendere lo script più compatto: scrivi di meno, fai di più.

La sviluppo di jQuery da parte della jQuery fundation prosegue su due versioni:

  • jQuery 1.x che garantisce la compatibilità con le versioni del Browser Microsoft precedenti a IE 9.
  • jQuery 3.x compatibile solo con le versioni di IE successive alla 9.

Inserire jquery in una pagina

I file sono disponibili in versione production (compressa) e in versione development (non compressa):

  • La versione development è la versione in chiaro, con i commenti degli sviluppatori, adatta per il debug, la didattica e lo sviluppo
  • La versione production è notevolmente più compatta ed è adatta solo per la distribuzione

La versione compressa (minified) è contraddistista dal suffisso .min.

Un certo numero di grandi imprese mettono a disposizioni copie di jQuery su CDN (Content Deployment Network) pubblici:

  • Google Ajax API CDN
  • Microsoft CDN
  • jQuery CDN

Per caricare l'ultima release stabile di jQuery è si può aprire la pagina:

https://code.jquery.com

Scegliere la versione e cliccare il link corrispondente. Si apre un piccola dialog box che consente di copiare il codice da inserire nella pagina HTML.

Codice HTML da inserire per caricare jQuery 3.x dal code.jquery.com (versione compressa)

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

Codice HTML da inserire per caricare jQuery 1.x dal code.jquery.com (versione compressa)

<script src=https://code.jquery.com/jquery-1.12.4.min.js
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>

Quando si usa un CDN per caricare jQuery (soluzione consigliata) il vostro sito in fase di sviluppo funzionerà solo se siete collegati a internet. Per evitare questo problema si può inserire questo codice dopo il codice che carica jQuery:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

<script type="text/javascript">
  var localpath = //inserisci l'url di jQuery sul tuo sito
  if (!window.jQuery){
      document.write('<script src="' + localpath + '" <\/script>');
  }
</script>

L'inizio

La libreria jQuery è costituita da codice che viene eseguito non appena caricato e che:

  • Crea un oggetto jQuery che diventa un oggetto globale (una proprietà di window)
  • Crea una funzione globale jQuery che è il cuore della libreria
  • Crea un alias per entrambe che è il segno del dollaro

 $ = jQuery 

Cosa fa jQuery

 var $mySet = $(selector);  

  • Passando un selettore CSS alla funzione $() creo un oggetto jQuery.
  • L'oggetto conterrà tutti gli elementi HTML che soddisfano il criterio di ricerca definito dal selettore
  • L'oggetto mette a disposizione del set di elementi HTML incorporati i metodi definiti da jQuery
  • Se il selettore non è sintatticamente corretto jQuery lancia un errore che blocca l'esecuzione del programma .
  • Se non esiste alcun elemento che soddisfa il criterio definito dal selettore la funzione $() crea un oggetto jQuery vuoto
/*==================================================================== 
	                   Creazione oggetti jQuery 
======================================================================*/

$('#pippo')				   // L'oggetto jQuery contiene l'elemento 
					       // con id "pippo"
$(".out")				   // L'oggetto jQuery contiene gli elementi 
					       // che a hanno la classe "out"
$("[title]")			   // L'oggetto jQuery contiene gli elementi 
					       // che a hanno l'attributo title
$("#myform input")		   // L'oggetto jQuery contiene gli elementi 
					       // input contenuti nel form con id "myform"
$("[data-target='#uno']")  // L'oggetto jQuery contiene gli elementi 
					       // con l'attributo data-target = "#uno"

/*==================================================================== 
	               Pseudo selettori usati da jQuery
======================================================================*/

$('a.external:first'); 	// primo elemento <a> 
						// con classe 'external' 
$('tr:odd'); 			// elementi <tr> dispari in 
						// una tabella
$('#myForm :text'); 	// tutti gli elementi input di
						// tipo text in #myForm 
$('div:visible'); 		// tutte le div visibli 
$('div:gt(2)'); 		// seleziona tutte le div
						// eccetto le prime tre
$('div:animated'); 		// tutte le div animate
  Tutti i selettori utilizzati da jQuery

$(selector).jquerymethod();

Utilizzare un metodo dell'oggetto jQuery.

Possiamo dividere i metodi offerti da jQuery in 6 gruppi:

  • Metodi che raccolgono informazioni sulle proprietà degli elementi HTML incorporati nell'oggetto jQuery o consentono di modificarle.
  • Metodi che agisco su oggetto jQuery stesso modificandone, ad esempio, la composizione.
  • Metodi che consentono di associare gestori di eventi agli elementi incorporati nell'oggetto jQuery
  • Metodi per la gestione di effetti (in particolar modo animazioni)
  • Metodi AJAX
  • Utilità

$(selector).css();

Per ottenere o modificare lo stile CSS di un elemento (o di un set di elementi) ho il metodo css:

// versione getter
var dimensione = $('h1').css('fontSize')   // restituisce la dimensione
                                           // (font-size) del primo elemento del set

var dimensione = $('h1').css('font-size')  // posso usare sia "font-size" che
                                           // "fontSize"

// versione setter
$('h1').css('fontSize', '100px');   // Imposto la dimensione di tutti gli elenti
                                    // del set

$('h1').css({                       // Imposto insieme dimensione e colore
  'fontSize' : '100px',
  'color' : 'red'
});

Aggiungere e rimuovere classi:

$('h1').addClass('big');                // Aggiungo la classe big a
                                        // tutti gli elementi h1
$('h1').removeClass('big');  // Rimuovo la classe big da
                                        // tutti gli elementi h1
$('h1').toggleClass('big');             // Controllo tutti gli elementi h1
                                        // se hanno la classe big la
                                        // rimuovo altrimenti la aggiungo

if ($('#pippo').hasClass('big') {       // Se l'elemento con id "pippo" ha
                                        // la classe big apro la finestra di   
   alert("Pippo ha la classe big");     // alert con un messaggio
}

Dimensioni e posizione

jQuery offre una varietà di metodi per ottenere e impostare le dimensioni e la posizione di un elemento. Esempi:

$('div.box').width(150);    // imposta la larghezza di tutti gli
                            // elementi div con classe box a 150px
$('div.box').width();       // ottiene la larghezza in pixel del
                            // primo elemento del set
$('h1').height('5em');      // imposta l'altezza di tutti gli elementi H1
                            // a 5em
$('div.box').position();    // restituisce un oggetto contenente
                            // le proprietà top e left che definiscono la
                            // posizione del primo elemento div con relativo
                            // classe box all'offsett del suo elemento padre

$(selector).attr();

Il metodo attr() ha una sintassi simile a css ma ottiene e imposta gli attributi di un elemento anziché lo stile:

// versione setter
$('a.fun').attr('href', 'hrefTuttiUguali.html');  // Assegna a tutti gli elementi a com
                                                  // classe fun lo stesso attributo href
$('a.fun').attr({                                 // Assegna a tutti gli elementi a com
  'title' : 'tutti lo stesso title',              // classe fun lo stesso attributo href
  'href' : 'laStessaUrl.html'                     // e insieme lo stesso attributo title
});

// versione getter
$('a').attr('href');                              // restituisce href del primo elemento del set

Altri metodi

  • html()
    Ottiene o imposta il contenuto HTML di un elemento.
  • text()
    Ottiene o imposta il contenuto testuale dell'elemento, nel caso il testo contenga tag HTML, questi vengono rimossi.
  • val()
    Ottiene o imposta il valore della proprietà value degli elementi <input>, <select><textarea>.

 Tutti i metodi di questo gruppo

$(selector).traversingmethod();

In questo gruppo sono i raccolti i metodi che consentono di attraversare, muoversi attraverso il set di elementi e trovare (o selezionare) altri elementi in base alla relazione di parentela con gli elementi selezionati.

Trovare gli ancestors

$(selector).parent()
Il metodo parent() restituisce l'elemento che contiene l'elemento selezionato.

$(selector).parents() o $(selector).parents(selector)
Il metodo parents() restituisce tutti gli elementi antenati dell'elemento selezionato. Passando un parametro che definisce un selettore è possibile restringere la ricerca agli antenati che soddisfano il criterio

$(selector).parentsUntil(selector);
Il metodo parentsUntil() funziona come parents() ma la ricerca viene interrotta quando viene trovato un anchestor che corrisponde al selettore passato come parametro.

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi che sono parent diretti di ogni elemento  <span> */
$("span").parent().css({"color": "red", "border": "2px solid red"});

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi che sono antenati di tutti gli elementi  <span> fino ad <html> */
$("span").parents().css({"color": "red", "border": "2px solid red"});

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi di tipo <ul> che sono antenati di tutti   gli elementi <span> */
$("span").parents("ul").css({"color": "red", "border": "2px solid red"});

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi che sono antenati di tutti gli elementi  <span> risalendo fino al primo elemento <div> */
$("span").parentsUntil("div");

Trovare i discendenti

$(selector).children()
Il metodo children() restituisce tutti i figli diretti dell'elemento selezionato.

$(selector).children(selector)
Passando un parametro che definisce un selettore è possibile restringere la ricerca ai figli che soddisfano il criterio definito dal selettore.

$(selector).find(selector)
Il metodo find() restituisce tutti gli elementi discendenti dell'elemento selezionato che soddisfano il criterio definito dal selettore è passato come parametro.

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi figli diretti di ogni elemento <div> */
 $("div").children().css({"color": "red", "border": "2px solid red"});

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi <p> ​​che hanno la  classe "prima", e sono figli diretti di ogni elemento <div> */
 $("div").children("p.first").css({"color": "red", "border": "2px solid red"});
 
/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi <span> discendenti di ogni elemento <div> */
 $("div").find("span").css({"color": "red", "border": "2px solid red"});
 
 /*L'esempio imposta il colore e il bordo rosso a tutti gli elementi discendenti di ogni elemento <div> */
 $("div").find().css({"color": "red", "border": "2px solid red"});

Trovare i siblings

$(selector).siblings() o $(selector).siblings(selector)
Il metodo siblings() restituisce tutti i fratelli diretti dell'elemento selezionato. Passando un parametro che definisce un selettore è possibile restringere la ricerca ai figli che soddisfano il criterio definito dal selettore.

$(selector).next(), $(selector).nextAll(), $(selector).nextUntil(selector),
Restituiscono i fratelli che seguono l'elemento selezionato: next restituisce solo l'elemento successivo, nextAll tutti i fratelli che seguono, con nextUntil la ricerca termina quando viene trovato un fratello che corrisponde a selector.

$(selector).prev(), $(selector).prevAll(), $(selector).prevUntil(selector),
Restituiscono i fratelli che precedono l'elemento selezionato: prev restituisce solo l'elemento precedente, prevAll tutti i fratelli che precedono, con prevUntil la ricerca termina quando viene trovato un fratello che corrisponde a selector.

/*L'esempio imposta il colore e il bordo rosso a tutti gli elementi fratelli di ogni elemento h2 */
$("h2").siblings().css({"color": "red", "border": "2px solid red"});

/*L'esempio imposta il colore e il bordo rosso a tutti gli elementi fratelli di ogni elemento <h2> */
$("h2").siblings().css({"color": "red", "border": "2px solid red"});

//L'esempio imposta il colore e il bordo rosso al fratello che segue immediatamente ogni elemento <h2>
$("h2").next().css({"color": "red", "border": "2px solid red"});

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi fratelli di ogni elemento <h2> che seguono l'elemento */
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});

/* L'esempio imposta il colore e il bordo rosso a tutti gli elementi fratelli di ogni elemento <h2> che seguono l'elemento fino al primo elemto <h6> */
$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});

 Tutti i metodi di questo gruppo

$(selector).on(evento,function); 

$(selector).on('evento', function() {...})
Il metodo on() associo ad un evento (il cui nome va messo tra virgolette) a una funzione che verrà eseguita ogni volta che l'evento colpisce l'elemento. 'evento' può essere sia un evento standard Javascript (come click o load) o un evento custom definito da jQuery o da un plugin.

$(selector).one('evento', function() {...})
Il metodo one() funziona esattamente com on() ma il gestore viene eseguito solo la prima volta.

$(selector).off('evento', function() {...})
Il metodo off() disattiva un gestore di evento attivato con on().

Il metodo on() ha altre funzionalità avanzate che consentono la gestione dinamica degli eventi e che esulano da questa trattazione.

jQuery definisce dei metodi semplificati specifici per i principali eventi che internamente utilizzano on(). L'elenco completo di questi metodi può essere consultato qui.

In Javascript elemento.onclick è una proprietà:

document.getElementById('myButton').onclick = function() {
  //comandi
}

Con l'evento elemento.onclick assegno un'unica funzione all'evento.
 

In jQuery $().click() è un metodo:

$('#myButton').click( function() {
  //comandi
});

 Con il metodo $().click() aggiungo una funzione all'evento.

Altri modi per creare un'oggetto jquery

$(elemento);

Restituisce un oggetto jQuery, costituito da un unico item, costruito su un elemento del dom.

var $win = $(window);
$win è l'oggetto jQuery costruito sull'elemento window a cui, quindi, sono stati aggiunti i metodi jQuery.

$(html);

Restituisce un oggetto jQuery, costituito da un unico item, corrispondente all'html passato come paramentro.

var $image = $('<img src="logo.png" />');
$image è un oggetto jQuery costruito su un nuovo elemento img creato da jQuery.

L'evento ready

In jQuery tutti i comandi devono essere eseguiti quando il DOM è completamente caricato e jQuery è correttamente inizializzato.

Per ottenere questo risultato ogni comando di jQuery va inserito in questo blocco:

$(document).ready( function() {
  // Il codice jQuery va
  // inserito qui
});

Il codice che utilizza jQuery, cioè, deve essere eseguito in risposta all'evento ready, un evento che jQuery stesso aggiunge all'oggetto document.

O, in versione compatta, semplicemente:

$(function() {
  // Codice jQuery
});

Chaining

Ogni metodo jQuery restituisce l'oggetto jQuery su cui il metodo ha operato. Questo rende possibilie il concatenamento tipico della scrittura javascript di jQuery:

$('#content')
   .find('h3')
   .eq(2)
   .html('nuovo testo per il terzo h3');