jQuery è un framework che risale al 2006 e da allora è diventato in breve tempo il più utilizzato e diffuso framework tra i webmaster di tutto il mondo. Questo risultato lo deve sicuramente ai suoi punti di forza, tra cui:

• Il motto di jQuery è “write less, do more” e difatti grazie a jQuery è possibile realizzare, attraverso pochissime righe di codice, script altrimenti molto complessi, ricchi di effetti su testo, immagini e capaci di interagire con i CSS, AJAX e molto altro;

• Elevata compatibilità con praticamente tutti i browser in circolazione;

• Capacità di lavorare in simultanea con altre librerie senza creare conflitti;

• Opportunità di utilizzare i numerosi plugin messi a disposizione dalla comunità e liberamente scaricabili;

• Possibilità di selezionare elementi del DOM utilizzando la stessa sintassi dei selettori CSS.

E’ bene precisare che jQuery non ha intenzione di sostituire JavaScript, il suo scopo è infatti quello di semplificare la vita degli sviluppatori, consentendo di scrivere meno codice e al contempo ottenere risultati elevati.

Vediamo adesso quali sorprese ci riserba questo framework: in particolare in questa prima parte dell’articolo affronteremo i fondamenti e le potenti capacità relative alla selezione degli elementi del DOM, mentre nella seconda parte approfondiremo la manipolazione del DOM, gli effetti, la gestione degli eventi ed altro ancora.

Di seguito vi riporto in dettaglio gli argomenti che affronteremo in questa prima parte dell’articolo:

• L’oggetto jQuery;
• Come importare JQuery;
• La funzione ready;
• I selettori;
• I selettori per attributi;
• I filtri.

 

L’oggetto jQuery

Per chi si avvicina a jQuery per la prima volta è quindi fondamentale sapere che tutto ruota attorno all’oggetto/funzione jQuery(). La sintassi prevede infatti sempre l’utilizzo di questo oggetto, sostituibile utilizzando il simbolo del dollaro ($), quindi le seguenti sintassi sono perfettamente equivalenti:

$("#cosenonjaviste")

jQuery("#cosenonjaviste")

Se utilizziamo la funzione jQuery.noConflict() verrà semplicemente rimosso l’alias $ e dunque è possibile fare uso di jQuery in tutti progetti senza paura di incappare in incompatibilità nel codice: ad esempio Mootools, richiamando questo framewok con la sintassi con il simbolo del dollaro e jQuery con la sintassi estesa jQuery() (vedi questo articolo).

Vediamo un semplice esempio in cui occorre trovare il valore dell’attributo href del seguente link.

www.cosenonjaviste.it

E di seguito confrontiamo come accedere all’attributo con JavaScript e con jQuery.

 // JavaScript nativo
document.getElementById("cosenonjaviste").href;

// jQuery
$("#cosenonjaviste").attr("href"); 

Già da queste righe di codice si intuiscono due caratteristiche fondamentali di jQuery:

1. La brevità e chiarezza del codice utilizzato;
2. L’elemento da ricercare è stato passato alla funzione jQuery() sotto forma di selettore CSS.

Prima di cambiare argomento vorrei farvi notare che talvolta vi capiterà di trovarvi in una situazione del genere:

$("#cosenonjaviste").fai_qualcosa(function() {
        $(this).fai_qualcosaltro();     
});

Non spaventatevi: la parola chiave this è la medesima parola chiave JavaScript. Ogni oggetto JavaScript puo’ essere convertito in oggetto jQuery, basta includerlo nell’oggetto jQuery(). E naturalmente ciò vale anche per this, così nel contesto appena esposto $(this) altro non è che un riferimento a $(#cosenonjaviste).

 

Importare jQuery

Per prima cosa occorre scaricare l’ultima versione del framework (la versione corrente è la 1.7.2) dal sito ufficiale. Una volta scaricata la libreria sarà necessario includerla all’interno della nostra pagina web. Ecco come:

// versione per lo sviluppo
 

// versione compressa, per la produzione
 

In alternativa è possibile, senza scaricare il package, includere direttamente un riferimento alla libreria sul sito ufficiale del progetto:

// sviluppo
 

// produzione
 

Oppure linkare quella resa disponibile da :

E il gioco è fatto!

 

Ready to go?

Adesso facciamo conoscenza delle funzioni ready() e load(). Questi due metodi permettono di sfruttare due fasi cruciali legate al caricamento della pagina:

$(window).load(function () {
  alert('window loaded');
});

$(document).ready(function() {
  alert('DOM loaded');
});

La differenza consiste nel fatto che load esegue lo script al completo caricamento della pagina, mentre ready lo esegue al completo caricamento del DOM della pagina e spesso torna quindi molto più utile.
Per ready è anche possibile usare questa sintassi ultra-compatta:

$(function() {
  alert('DOM loaded');
});

Vediamo un esempio di utilizzo del  metodo ( lo potete testare a ):

 
  
  
 
 
  
DOM loaded!
 

La funzione text(), come vedremo più in dettaglio nella seconda parte di questo articolo, consente di ottenere/impostare il valore relativo all’elemento a cui la funzione è applicata e ha la seguente sintassi: text(stringa);
Se stringa è vuota, la funzione è in modalità lettura, altrimenti stringa sarà il nuovo valore chè verrà impostato all’elemento.

 

Selettori

Una delle cose più interessanti di jQuery è il motore di selezione. Questo motore permette di selezionare in maniera molto intuitiva ed efficiente gli elementi all’interno del documento, così da applicarvi proprietà e metodi. I selettori vengono passati come parametro alla funzione jQuery(). La sintassi utilizzata è la stessa per i selettori CSS (più alcune scorciatoie particolari). Per selezionare gli elementi tag si scrive solamente il nome del tag, per la classe si precede invece il nome della classe con un punto (.) e per l’id utilizziamo un cancelletto (#).
All’inizio dell’articolo abbiamo notato di aver fatto accesso al layer con id="cosenonjaviste" attraverso la seguente sintassi:

$("#cosenonjaviste")

E’ possibile accedere anche a tutte le occorrenze di uno stesso tag:

$("p")

Allo stesso modo è possibile accedere anche a tutte le occorrenze che hanno la medesima classe:

$(".myClass")

E’ possibile una combinazione delle selezioni come per i CSS:

$("p.myClass")

Sempre come per un foglio di stile CSS, possiamo indicare più selettori contemporaneamente:

$("#navigation,a.internal");

Infine è possibile selezionare tutti gli elementi di un documento:

$("*");

E’ bene ricordare che maggiore sarà la precisione con cui identificheremo gli elementi che ci servono, maggiore sarà anche la velocità con cui jQuery li raccoglierà e soprattutto minore sarà il peso dello script per il browser.

Nel caso di elementi nidificati, possiamo accedervi specificando la sequenza degli elementi:

     div padre
     

          div figlio
     
 

In questa potete testare il codice appena descritto.

La funzione css(), come vedremo più in dettaglio nella seconda parte di questo articolo, consente di lavorare con i CSS in modo diretto ed ha la seguente sintassi: css(comando CSS, valore);

Per ottenere lo stesso risultato visto nel precedente caso, potremmo utilizzare anche il seguente codice:

Questo perchè $("#div1 > div") seleziona tutti i div che sono figli dell’elemento che corrisponde a div1. A differenza pero’ del caso precedente non vengono selezionati anche i “nipoti” e “pronipoti”, ma solo i figli di primo grado ().
Altri due selettori interessanti sono precedente + seguente e precedente ~ adiacente. Nel primo caso vengono selezionati tutti gli elementi preceduti direttamente da uno specifico elemento.

$("form + div");

Nel secondo caso precedente ~ adiacente vengono selezionati tutti gli elementi direttamente adiacenti ad un elemento.

$("form ~ div");

La sostanziale differenza è che nel primo caso viene selezionato il div immediatamente dopo un tag form, nel secondo caso invece i div selezionati sono tutti quelli successivi al tag form, anche non immediatamente ().

 

Selettori per attributi

Un metodo di selezione degli elementi molto utile è quello che permette di indicare regole specifiche per gli attributi degli elementi. Come in precedenza la sintassi non si discosta da quella dei CSS. Per esempio se vogliamo selezionare tutti i link con attributo title:

$("a[title]")

Adesso proviamo ad individuare un valore ben definito per l’attributo target:

//tutti i link che si aprono in nuove finestre
$("a[target='_blank']");

//link che non aprono una nuova pagina del browser
$("a[target!='_blank']"); 

Possiamo indicare anche solo una parte del valore:

//link con titolo che inizia per "new"
$("a[title^='new']"); 

//link con titolo che finisce per "article"
$("a[title$='article']"); 

Inutile dire che è possibile concatenare i selettori di attributi per raffinare al meglio la nostra ricerca:

$("a[target='_blank'][title='new article']")

La selezione degli input dei form può essere migliorata mediante dei filtri basati sugli attributi (ad esempio type o name) degli stessi:

//seleziona tutti gli input con name='nome'
$("input[name='nome']"); 
 
 //tutti gli input il cui name inizia con 'nome'
$("input[name^='nome']");
 
//tutti gli input il cui name finisce con 'me'
$("input[name$='me']"); 
 
//tutti gli elementi input che sono type password
$("input[type='password']");

//tutti gli input che non sono type password
$("input[type!='password']");

Vediamo una relativa alla selezione per attributi.

La funzione click() utilizzata nella pagina di esempio, come vedremo più in dettaglio nella seconda parte di questo articolo, consente in questo caso di eseguire delle azioni al verificarsi dell’evento click sull’elemento in cui la funzione è applicata.

 

Filtri

I filtri sono selettori speciali (spesso un’estensione dei selettori nativi CSS) tramite i quali è possibile non solo raffinare la selezione degli elementi, ma anche raggruppare molto velocemente degli elementi specifici. La sintassi dei filtri è molto simile ai pseudoselettori CSS, quelli cioè preceduti dai due punti “:”.
Nel seguente esempio vengono selezionati tutti i campi input nascosti:

$("input:hidden"); 

O ancora tutte le voci di menu con sottomenu:

$("#menu li:has(ul)");

Mentre in quest’ altro caso vengono selezionati tutti i link ad esclusione di quelli aventi classe .internal:

$("a:not(.internal)"); 

has() e not() sono dei “filtri funzione” che selezionano rispettivamente:

• Gli elementi che hanno un contenuto corrispondente al selettore specificato come argomento;
• Gli elementi che non soddisfano la selezione specificata come argomento.

Altre funzioni interessanti possono essere contains(testo) che filtra tutti quegli elementi che contengono la stringa testo e nth-child() che accetta come argomento varie opzioni di selezione:

• even: solo elementi pari;
• odd: solo elementi dispari;
• un numero che indica la posizione i-esima partendo da zero;
• un’equazione.

Ecco una sui possibili utilizzi di questi filtri sopra menzionati.

Adesso vedremo come selezionare gli elementi di una tabella in base al loro ordine. Supponiamo di avere una tabella con id="idtable" e vediamo qualche possibile selezione su di essa:

 //la prima riga della tabella
$("#idtable tr:first");
  
//l'ultima riga
$("#idtable tr:last"); 

//le righe dispari
$("#idtable tr:odd"); 

//la riga numero 5
$("#idtable tr:eq(5)"); 

Ed ecco dove si puo’ vedere quanto affermato.

Nella sezione “Selettori per attributi” abbiamo visto come selezionare tutti gli input che sono type="password" mediante il comando:

$("input[type='password']");

jQuery tuttavia fornisce anche una scorciatoia, cioè la possibilità di utilizzare la keyword dell’attributo type preceduta dai due punti per identificare velocemente l’elemento. Dunque potremmo usare direttamente il seguente:

 //seleziona tutti gli input type="password"
$(":password");

In maniera analoga possiamo ricercare rispettivamente tutti gli elementi disabilitati o anche trovare velocemente i checkbox selezionati dall’utente:

$(":disabled";

$(":checked");

Conclusioni

Prima di lasciarvi, vorrei segnalarvi un’interessante ed esauriente pagina contenente un riepilogo degli strumenti di selezione sin qui visti.

andremo oltre la semplice selezione e vedremo quali altri strumenti jQuery ci mette a disposizione per manipolare il DOM, per gestire degli eventi, per creare effetti e molto altro ancora.