Nella parte precedente di questo articolo abbiamo introdotto il framework jQuery ed abbiamo visto in particolare le principali tecniche di selezione che abbiamo a disposizione.
In questo articolo proseguiamo il nostro viaggio alla scoperta di altre risorse e tecniche che jQuery ci offre.

In questa seconda parte affronteremo i seguenti argomenti:

jQuery e CSS

Negli esempi dell’articolo precedente abbiamo introdotto la funzione css() che, come abbiamo visto, consente di lavorare con i CSS in modo diretto con la seguente sintassi:

$(selettore).css(comando CSS, valore);

se vogliamo modificare lo stile dell’elemento selezionato. Oppure se vogliamo solo prelevarne lo stile:

$(selettore).css(comando CSS);

Ad esempio, come già visto:

$("#testo").css("color", "#C0C0C0");

colora un testo, mentre:

$("#testo").css("background", "#C0C0C0");

colora uno sfondo, e cosi via.
E’ possibile anche settare più proprietà di un elemento. Possiamo infatti passare un intero oggetto:

$(selettore).css(ogetto CSS);

ad esempio così come segue:

$('div').css({'background-color' : '#333', 'color' : 'white'});

Ecco una pagina di prova.

Spesso l’uso più comune di questo metodo è usarlo per prelevare uno stile del primo elemento trovato tramite selettore jQuery ( come potete vedere in questo esempio):

$('div').css('background-color');

Nella pagina di esempio sopra postata viene catturato l’evento click() su di un elemento div. Vedremo più in dettaglio nella sezione “Eventi” questa particolarità. Inoltre sempre nello stesso esempio viene utilizzata la funzione html(), che sarà approfondita nella sezione “Manipolare gli elementi del DOM”

Oltre alla funzione css() jQuery mette a disposizione alcune funzioni stilistiche predefinite, fra i quali:

  • hide – nasconde un elemento;
  • show – mostra un elemento;
  • toggle – per alternare hide e show in base alla visibilità di un elemento;
  • width – imposta o restituisce la larghezza di un elemento;
  • height – imposta o restituisce l’altezza di un elemento.

Vediamo una pagina di esempio.
Infine jQuery permette di gestire le classi CSS anche attraverso i seguenti metodi di manipolazione del DOM:

  • hasClass: metodo di controllo, ritorna true se l’elemento ha una specifica classe;
  • addClass: aggiungi una classe agli elementi;
  • removeClass: rimuove una classe agli elementi;
  • toggleClass: aggiunge una classe se già non presente, altrimenti la toglie.

Il metodo hasClass() consente di verificare se un dato elemento della pagina ha una determinata classe. Questo metodo restituisce un valore booleano (true o false):

if ($('p').hasClass('rosso')) {
  alert('Il paragrafo è scritto in rosso');
}else{
  alert('Il paragrafo NON è scritto in rosso');
}

Per quanto concerne gli altri metodi, piu avanti nella specifica sezione ne approfondiremo e vedremo il loro utilizzo.

Metodi traversing

Nella precedente parte dell’articolo abbiamo visto come sia possibile, attraverso i selettori CSS, ottenere una collezione di elementi da una pagina HTML in modo da poterli manipolare con jQuery. A questo punto potremmo pensare di utilizzare questa collezione come base per scorrere gli elementi all’interno della pagina e lavorarci. A queste necessità rispondono una serie di metodi che prendono il nome di “Traversing”.
Nonostante vi sia un numero considerevole di metodi traversing, solo alcuni vengono utilizzati spesso. Vediamone dunque alcuni, ma prima di tutto ci occorre una funzionalità per scoprire agevolmente quanti elementi sono stati trovati dal motore di selezione. Questo possiamo farlo richiamando il metodo size() oppure anche la proprietà length, consigliata per la maggiore velocità di risposta.
Ciò che viene restituito è un numero che potremo utilizzare, per esempio, all’interno di strutture di controllo:

<script>
...
var liste = $("#menu li");
if (liste.length > 0 ) {
 // esegui del codice solo se ci sono elementi
}
...
</script>
...
<ul id="menu">
	<li><a href="#">link 1</a></li>
	<li><a href="#">link 2</a></li>
	<li><a href="#">link 3</a></li>
</ul>

Una volta verificata la presenza di elementi all’interno dell’oggetto jQuery, potremmo voler lavorare direttamente su alcuni di essi richiamando il metodo get() che restituirà una collezione di elementi che potremo elaborare con i metodi nativi di JavaScript o con altri framework.
Un metodo molto simile al precedente è eq(), che tuttavia restituisce sempre e solo un oggetto jQuery, dandoci la possibilità di applicare su uno specifico elemento altri metodi jQuery:

// richiama tutti gli elementi di una lista
$("#menu li").get();

// due modi per determinare l'html contenuto in un elemento lista
var html = $("#menu li").get(0).innerHTML; // con JavaScript nativo
var html = $("#menu li").eq(0).html(); // con metodo jQuery

Un metodo che risulta spesso molto utile è each(), che permette di applicare una funzione specifica su ogni elemento della collezione, iterandoli:

$("#menu").each(function() {
		$(this).css("margin-left", leftmargin+"px");
		leftmargin += 10;
});

All’interno della funzione passata ad each(), il codice $(this) specifica che in questo momento stiamo applicando la funzione all’elemento corrente del ciclo.
In alternativa possiamo definire due argomenti per la funzione passata ad each(). Questi argomenti stanno a rappresentare l’elemento ed il suo indice nella collezione (vedi esempio).

Un altro metodo è la funzione find(). Questo metodo ci permette di selezionare gli elementi interni ad un elemento, ovvero ricerca gli elementi figli all’interno della collezione attuale secondo il selettore CSS passato come argomento.

$("#menu").find("li"); // tutti i tag li

Con questo codice vengono selezionati tutti i tag <li> presenti all’interno dell’elemento contrassegnato da id="#menu".
Molto simile a find() è children(), che tuttavia ricerca solo gli elementi direttamente discendenti (figli) in quelli della collezione (esempio).

 

Eventi

Abbiamo già esaminato l’evento relativo agli script eseguibili al caricamento della pagina ready() e load(). Tuttavia in jQuery esistono altri eventi, i principali sono:

  • ready – caricamento anche parziale della pagina;
  • load – caricamento completo della pagina;
  • bind – crea un handler a runtime;
  • click – click su di un elemento;
  • mouseover – passaggio del mouse di un elemento;
  • mouseout – uscita del mouse da un elemento;
  • error – gestione di un eventuale errore;
  • scroll – scrolling della pagina;
  • resize – ridimensionamento della pagina;
  • focus – focus su un elemento di un form;
  • submit – invio di un form.

Per prima cosa vediamo il metodo bind(type, data, fn) con il quale possiamo legare una o più funzioni (dette handlers) ad uno o più eventi. Questo metodo prevede come primo argomento una stringa che definisca l’evento a cui associare una funzione oppure più eventi separati da uno spazio.
Come secondo argomento bind(...) accetta sia una funzione oppure un oggetto JavaScript con dei dati ricavabili dalla proprietà data di event. In quest’ultimo caso la funzione da associare diventa il terzo argomento.

L’oggetto event viene passato in maniera automatica alle varie callback bindate agli elementi della pagina ed incapsula alcune informazioni relative al comportamento dell’utente. Vedi l’oggetto event sulla documentazione ufficiale

Vediamo un esempio:

$(function () {
	$(".campo").bind(" mousedown mouseup", {"background-color" : "#FFFFCC"}, function (event) {
			if (event.type == "mousedown") {
				$(this).css(event.data);
			} else {
				$(this).css("background-color","#CCCCCC");
			}
	});
});

Se mediante bind(...) leghiamo una funzione ad un dato evento, mediante unbind(...) disassociamo l’handler dall’elemento al verificarsi di un dato evento.

var handler = function() {
  ...
};
// al click associo l'handler
$('.campo').bind('click', handler);

// ...con un altro click tolgo l'handler
$('.campo').unbind('click', handler);

Più semplicemente utilizzando unbind() senza alcun parametro verranno disassociati tutti gli handlers legati all’elemento (esempio):

$('.campo').unbind();

Tuttavia jQuery mette a disposizione degli shortcut che corrispondo ai classici eventi che sono delle scorciatoie rispetto alla sintassi di bind() se vogliamo catturare ad esempio l’evento relativo al click su un elemento anzichè scrivere:

$('#testo').bind('click', function() {
  alert('Ciao!');
});

possiamo scrivere direttamente:

$("#testo").click(function(){
  alert("Ciao!");
});

Infine vorrei aggiungere che se il metodo click() viene utilizzato senza passare alcun parametro, questo produce l’effetto di simulare il click del mouse sopra un dato elemento cui l’evento è associato. E se era stata prevista l’esecuzione di una data funzione al verificarsi di quel evento, questa funzione verrà eseguita (esempio).

$("#testo").click();

Prima di cambiare argomento merita una menzione particolare Il metodo preventDefault() dell’oggetto event che impedisce al browser di eseguire l’azione predefinita associata ad un evento. Consideriamo il seguente codice:

     $("a").click(function(event){
         event.preventDefault();
         alert( "Link disabilitato!!" );
      });

L’evento di default al click su un tag sarebbe l’apertura di un nuovo link, che in questo caso viene impedito.

 

Manipolare gli elementi del DOM

jQuery consente di agire dinamicamente sul codice HTML di una pagina attraverso diverse interessanti funzioni, tra queste html() e text() le cui sintassi sono le seguenti:

html([codice_html])

text([stringa_di_testo])


$("#testo").html('<b>W jQuery!</b>');
...
$("#testo").text("jQuery!");
...
var testo = $("#testo").text();
...
var html = $("#testo").html();

Come si puo’ vedere, queste funzioni oltre ad impostare un valore possono, quando non sono specificati i parametri, anche restituirlo (esempio).
Per interagire con i valori degli elementi di un form (input, textarea, select,…) è presente il metodo val(), simile ai precedenti html() e text(), che come questi permette all’utente sia di recuperare che di impostare i valori (esempio).
Se vogliamo invece recuperare o impostare il valore di un attributo possiamo usare il metodo attr(...):

attr(nome_attributo) per recuperare il valore

oppure:

attr(nome_attributo, valore|oggetto) per settare il valore

// recupero il valore dell'attributo src dalle immagini
var img = $("img").attr("src");

// imposto un nuovo valore per l'attributo alt della stessa immagine
$(img).attr("alt", "Una bella immagine!");

// imposto più attributi in un colpo solo
$("img").attr({
  alt: "Una bella immagine!",
  title: "immagine"
});

Per rimuovere l’attributo dall’elemento selezionato possiamo invece usare removeAttr():

// rimuovo l'attributo alt dalle immagini
$("img").removeAttr("alt");

Abbiamo poi altre funzioni, tra queste: append() che aggiunge un elemento DOM o del testo ad un elemento già esistente:

<script type="text/JavaScript" src="jQuery.js"></script>

<script type="text/JavaScript">
$(document).ready(function(){
$("#testo").append(" write less, do more  ");
});
</script>

<div id="testo">jQuery</div>

Esiste anche la funzione remove() per rimuovere elementi

// rimuovo tutti gli elementi paragrafo
$("p").remove();

Infine possiamo usare il metodo addClass() con il quale è possibile aggiungere una classe CSS ad un dato elemento.

$("div").addClass("testo");

Questo metodo è speculare a removeClass() il quale permette invece di rimuovere una classe ad un dato elemento e naturalmente toggleClass() che aggiunge una classe se già non presente, altrimenti la toglie (esempio).

 

Method chaining

Una delle caratteristiche più innovative di jQuery è il cosiddetto “method chaining” cioè la possibilità di permettere ai metodi di essere concatenati. Secondo l’architettura del framework, tutti i metodi, che non estraggono un valore, restituiscono un riferimento all’oggetto jQuery su cui sono stati lanciati. Infatti tutti i metodi di jQuery ritornano lo stesso oggetto sul quale sono stati invocati.
In termini pratici questo significa che è possibile lanciare più metodi in sequenza:

$('div').addClass('classe').html('<b>qualcosa</b>')
  .css("color", "#C0C0C0");

Questa tecnica rende più leggibile, ordinato e compatto il codice, inoltre risulta comoda quando dobbiamo agire più volte su un elemento permettendoci di non appesantire il codice con troppe righe.

 

AJAX

jQuery mette a disposizione diversi comandi per l’interazione con AJAX. Tuttavia la funzione principale per inviare richieste di questo tipo è il metodo statico $.ajax(). La funzione permette di effettuare una chiamata AJAX e di personalizzarla con molti parametri i quali vengono passati tramite notazione JSON. I più importanti sono sicuramente identificabili in una di queste tre tipologie:

    • url della risorsa;
    • dati da passare;
    • funzione da eseguire al termine della chiamata.

Scendiamo nel dettaglio e vediamo i parametri principali:

        • type : il tipo di richiesta HTTP da effettuare, principalmente POST,GET,..;
        • url : URL della risorsa alla quale viene inviata la richiesta;
        • data : che può essere un oggetto del tipo {chiave : valore, chiave2 : valore}, oppure una stringa del tipo "chiave=valore&chiave2=valore2" contenente dei dati da inviare al server;
        • dataType : Tipo di dato che si riceve di ritorno; jQuery tenta di capirlo da solo, ma è sempre meglio specificarlo.
          I tipi possibili sono: xml, html, script, json, jsonp e text;
        • success : funzione che verrà eseguita al successo della chiamata;
        • error : funzione che verrà eseguita in caso di errore nell’effettuare la chiamata. Un tipico esempio è dato dall’impossibilità di accedere alla risorsa remota perchè inesistente o, comunque, non accessibile;
        • complete : Consente di specificare una funzione che verrà eseguita al termine della chiamata indipendentemente che abbia dato successo o errore; è eseguita dopo success o error;
        • timeout : Tempo in millisecondi dopo i quali la richiesta viene considerata scaduta.

Di seguito potete vedere una tipica chiamata AJAX, che puo’ essere testata a questa pagina e come potete notare, se la chiamata ha successo i dati verranno inseriti all’interno di specifici elementi DOM, altrimenti verrà mostrato un messaggio di errore.

 $.ajax({
	url:"richiesta.txt",
	type: "GET",
	success:function(result){
		$("div#risposta").html(result);
	},
	error: function(richiesta,stato,errori){
		$("div#risposta").html("<b>Chiamata fallita:</b>"+stato+" "+errori);
	}
     });

Effetti jQuery

jQuery consente di gestire degli effetti che possono essere impostati su testi, immagini o altri elementi. Tra questi abbiamo già visto hide, show e toggle. Vediamo di seguito altri metodi di questa famiglia:

            • slideDown([durata],[callback]): mostra l’elemento con un effetto a comparsa verso il basso;
            • slideUp([durata],[callback]): nasconde l’elemento con un effetto a scomparsa verso l’alto;
            • slideToggle([durata],[callback]): unisce i due precedenti ed inverte la visibilità alternando slideDown e slideUp.;
            • fadeIn([durata],[callback]): mostra l’elemento desiderato;
            • fadeOut([durata],[callback]): effetto di sbiadimento dell’elemento;
            • fadeTo(durata,opacità,[callback]): permette di stabilire l’opacità esatta dell’elemento.

L’ultimo metodo utilizza gli stessi parametri degli altri due, ma in più permette una personalizzazione dell’opacità di destinazione dell’elemento: si tratta di un numero compreso tra 0 e 1, dove con 0 l’elemento è completamente invisibile mentre con 1 è completamente visibile.
Come si puo’ vedere questi metodi richiedono un intervallo temporale (parliamo di millisecondi) che è la durata che l’utente imposta ed è possibile creare una callback da eseguire al termine dell’effetto. Vediamo un bell’esempio che mostra 3 box a cui sono applicati in caso di click sugli stessi degli effetti differenti.

Con jQuery è possibile dar vita anche a degli effetti personalizzati grazie al metodo animate().
Esistono due diverse implementazioni del metodo. Noi vedremo quella che ha la seguente sintassi:

animate(parametri,[durata],[andamento],[callback])

Il primo parametro è un’oggetto JavaScript con la proprietà CSS scritte in notazione “CamelCase“. I valori che vengono specificati riguardano, ovviamente, il risultato finale, cioè l’aspetto del nostro elemento quando è finita l’esecuzione dell’animazione.
Gli altri argomenti accettati sono la durata dell’effetto, l’andamento (il framework offre due opzioni predefinite, linear e swing, quest’ultimo è utilizzato di default se non specificato) ed una funzione di callback. Per quanto riguarda la durata, questa può essere espressa, come al solito, in millisecondi oppure con le stringe fast o slow.

Vediamo di chiarire meglio cosa è l’andamento: Come si intuisce dall’immagine con linear si ottiene un movimento lineare con velocità costante, mentre con swing il movimento parte piano, accelera per poi frenare prima di finire. Visivamente, con swing, avremo un movimento più morbido e piacevole.

Vediamo un esempio di utilizzo del metodo animate() con parametri e durata :

  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );

che potete testare a questa pagina.

Riferimenti

E siamo giunti al termine di questo Tutorial su jQuery… Chissà se dopo questa lettura e dopo un po’di pratica, sarà anche per voi difficile far a meno di questo framework… 🙂
Prima di lasciarvi eccovi una lista di link di approfondimenti e riferimenti su jQuery:

9 Posts

Sono laureato in Ingegneria Informatica e lavoro dal 2008 come sviluppatore Java presso OmniaGroup. Sviluppo principalmente applicazioni web soprattutto su piattaforme alternative come ad esempio lo stack JSF+Spring+Hibernate (o altri ORM) oppure lo stack JavaScript(JQuery o ExtJS)+Spring+Hibernate su Tomcat, o sui principali AS (WebSphere,Weblogic,Glassfish, Jboss). Nei ritagli di tempo mi diletto a programmare su piattaforma Android e con altri linguaggi, quali ad esempio Python. LinkedIn profile