jQuery italia

L'oggetto principare utilizzatto in jQuery è la funzione jQuery, o meglio il suo alias $, utilizzato per mantenere una certa uniformità con la libreria Prototype. Questa funzione sta alla base del meccanismo di funzionameto di questo framework in quanto permette di creare i selettori per gli elementi voluti.

Le due funzioni jQuery e $ si equivalgono, come si può capire dall'esempio sottostante:

var link_1 = jQuery("a"); //seleziono tutti i link tramite la funzion jQuery

var link_2 = $("a"); // seleziono tutti i link tramite la funzione $  

Le due variabili utilizzate sono diverse, ma il loro contenuto è esattamente lo stesso, ovvero tutti i link del documento.

La funzione $ può essere utilizzata anche per selezionare elementi tramite query più complesse:

$(".class1,#mio_id"); //seleziona gli elementi per classe e per id

Come parametro alla funzione è possibile anche passare un classico selettore di elementi del DOM di Javascript e il risultato che otterremo sarà sempre lo stesso:
Ecco un semplice esempio per selezionare un elemento tramite id:

$(document.getElementById("mio_id")); //seleziona l'elemento con id = mio_id

$("#mio_id"); //seleziona l'elemento con id = mio_id (come sopra)

Inoltre la funzione $ accetta anche un altro parametro, ovvero il contesto di ricerca su cui deve essere applicato il selettore. Infatti se questo parametro non è passato tale funzione esegue la ricerca su tutto il documento. Se invece non si vuole ricercare in tutto il documento, ma solamente in una parte di esso, lo si può fare tramite questo secondo parametro.
Ecco come al solito un esempio, nel quale si vogliono ricercare tutti i link () all'interno del solo elemento identificato tramite id (ad esempio un div);

$("a", document.getElementById("id_div")); //seleziona tutti i link all'interno dell'elemento con id = id_div

Uno dei punti di forza di jQuery come ricorderete sta nel poter ridurre il codice scritto e nell'elevata comprensione di lettura del codice che lo stesso framework mantiene. Tali caratteristiche sono date dalla proprietà di concatenazione del codice che jQuery permette. Questa possibilità è fornita dal fatto che quasi ogni funzione ritorna lo stesso oggetto jquery dalla quale è stata chiamata.
Ecco un esempio in cui tale proprità entra in gioco.

var links = $("a");

links.css("color","blue");

links.bind("click", funzione_click);

links.show("1200");

links.css("width","100px");

La stessa cosa può essere scritta ottimizzando il codice tramite la proprietà di concatenazione.

$("a")

.css({color: "blue", width: "100px" })

.bind("click", funzione_click)

.show("1200");  

Come si può vedere dalle due scritture la seconda rimane sicuramente più sintetica e anche più comprensibile alla lettura del codice stesso da parte di un programmatore.
Attenzione, il punto e virgola deve essere posto alla fine dell'ultima funzione da eseguire sullo stesso elemento selezionato dal selettore, altrimenti non si ha l'effetto voluto.

Creazione di nuovi elementi nel DOM

La funzione $ può essere usata per crare un nuovo elelmento nel DOM. Questo avviene perchè la stessa funzione interpreta gli argomenti passatigli e riesce a stabilire l'azione da compiere. Infatti per creare un nuovo elemento basta passare come argomento della funzione il tag stesso, o in forma tag apertura + tag chiusurao passandogli anche il tag vuoto ().
Ecco, ad esempio la creazione di un div:

$("<div></div>"); //crea un nuovo div

$("<div/>"); //crea un nuovo div tramite il tag vuoto

Niente vieta di poter creare elementi complessi, introducendo come parametro anche vere e proprie prozioni di codice HTML completo di annidamenti e tutto il resto. L'utilità di questa meccanismo sta nel poter identificare il blocco appena creato tramite una variabile e successivamente di potergli applicare i metodi jQuery. A volte può essere molto più utile utilizzare questo criterio quando si devono creare nuove parti di documento, piuttosto che ricercarle con i selettori.
Ecco un esempio chiarificatore:

var blocco_inserito = $("<div><p>Benvenuto in jQueryItalia</p></div>");

Ecco invece come possiamo applicare i metodi jQuery al blocco appena creato:

blocco_inserito.addClass("nuova_classe"); //aggiunge la classe "nuova_classe" al div

Per adesso abbiamo solo creato i nostri elementi, ma dobbiamo vedere come possiamo inserirli all'interno della pagina.
Utilizzeremo il metodo appendTo fornitoci dal framework:

blocco_inserito.appendTo(document.body); //inserisce il blocco creato nel body

blocco_inserito.appendTo("#id_ele"); //inserisce il blocco dentro un altro elemento con id=id_ele

Funzioni al caricamento del DOM

Alla funzione $ possono essere passate delle funzioni che verranno caricate quando il DOM è caricato. Bisogna prestare bene attenzione che questo non significa che tali funzioni sono caricate dopo il caricamento di tutto il documento (fogli di stile, immagini, ecc), ma esclusivamente del DOM.
Infatti vediamo questi due esempi che differiscono proprio in questa sottigliezza:

$(function(){

alert ("DOM completamento caricato"); //semplice alert
mia_funzione(); //esegue la funzione "mia_funzione"

});

Invece se si vuole attendere il caricamento dell'intera pagina si può utilizzare:

window.onload = function (){

alert ("DOM completamento caricato");
mia_funzione();

};

Questa differenza è molto utile e garantisce la corretta esecuzione di funzioni su elementi anche quando la pagina non è completamente caricata: si pensi infatti ad una pagina con molte immagini e di notevoli dimensioni, sarebbe inutile attendere che queste siano caricate per eseguire funzioni che magari neanche le coinvolgano.