Come abbiamo già accennato, l'oggetto $() costituisce in un certo senso il cuore e la parte più importante di jQuery.
Fra le parentesi di $() dobbiamo indicare il selettore, ovvero la regola in base alla quale selezionare l'oggetto della pagina sul quale vogliamo operare. Per esempio:
ele = $('p').length;
alert(ele);
Questo codice:
- seleziona in un colpo solo tutti i paragrafi p;
- ne visualizza con l'istruzione alert la proprietà length che corrisponde al numero di elementi selezionati (cioè nel nostro caso di paragrafi) presenti nel documento.
La proprietà length ci fornisce un esempio semplice che ci permette di concentrarci qui sul processo di selezione (tratteremo poi più diffusamente delle azioni che si possono eseguire sugli elementi selezionati). Fra l'altro questo spezzone di codice è utile per verificare rapidamente se il selettore funziona correttamente (se il numero visualizzato dall'istruzione alert è uguale al numero di paragrafi effettivamente presenti nella pagina).
Possiamo usare molti selettori di base, alcuni dei quali sono mostrati negli esempi seguenti:
ele = $("#blocco").length; //seleziona un singolo elemento con id "blocco"
ele = $("a.external").length; //solo i link con classe "external"
ele = $(".external").length; //tutti gli elementi appartenenti alla classe "external"
ele = $("h1,div,p").length; // tutti gli h1, i div e i p
Si osservi che alcune delle selezioni precedenti, selezionano in generale più elementi, mentre altre ne selezionano uno solo: per es. $("#blocco") fornisce un unico elemento, dal momento che l'identificatore id dev'essere unico in un documento.
Tuttavia parte della potenza di jQuery è, come già detto, il fatto che può operare allo stesso modo su un unico elemento come su un gruppo di elementi. Per esempio:
$("#blocco").hide(); // nasconde solo l'elemento con id #blocco
In generale è possibile comporre i selettori, secondo regole pressoché identiche a quelle usate nei fogli stile per creare selettori contestuali. Per esempio:
Un altro selettore usato molto spesso, cui abbiamo già accennato, è la parola chiave this, che seleziona l'oggetto corrente (per esempio quello su cui abbiamo cliccato):
Questi esempi non esauriscono tutte le possibilità di selezione offerte da $(). Per avere un quadro più esaustivo, raccomandiamo di leggere la Guida a jQuery su HTML.it o il jQuery Tutorial su w3schools.com.
Già da questo breve introduzione è possibile rendersi conto di come jQuery semplifichi il lavoro di selezione degli elementi del DOM. A differenza dei molti metodi diversi esistenti in jS (document.getElementById, document.getElementsByTagName, document.getElementsByClassName etc.), jQuery utilizza una sola funzione per tutti i possibili tipi di selezione. E, soprattutto, abbina questa funzione $() a tutta la potenza e versatilità dei metodi di selezione offerti dai fogli stile.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
