Selettori avanzati

Indice

Uno dei componenti più impressionante di jQuery è la quella dei suoi selettori, che consentono di dimenticare il noioso document.getElementById() e il complesso codice JavaScript. jQuery utilizza il meglio di CSS1, CSS2, CSS3 e di XPath per selezionare facilmente qualsiasi elemento della pagina senza saturare il codice XHTML con gli attributi “id”. Esempi:

Le varie opzioni
Con jQuery
⤽
Copia codice 

// Seleziona tutti i paragrafi nella pagina
// che hanno almeno un link
$("p[a]");
// Seleziona tutti i "div" che non sono nascosti
$("div:visible");
// Seleziona tutti i radio options che sono state selezionate
$("input[@type=radio][@checked]");
// Seleziona più  elementi attraverso i suoi "id"
// e le sue "class" (restituisce un array)
$("p.importante, div#menu, span#introduccion p.especial a");
Inoltre, jQuery supporta molti dei selettori che definisce CSS, qualcosa che i browser attuali possono solo sognare di avere un giorno, come: :nth-child(n), :empty, :not, :disabled. Per i programmatori abituati a lavorare con XML, jQuery permette di usare anche l’XPath per la selezione di elementi, come per esempio:
Con XPath
⤽
Copia codice 

// Seleziona tutti i paragrafi nella pagina
$("/html/body//p");
// Seleziona tutti i links i cui
// attributi "rel" sia uguale a "nofollow"
$("//a[@ref='nofollow']");
jQuery è così avanzato che aggiunge anche i suoi propri selettori che non esistono in CSS o XPath e che possono facilitare notevolmente lo sviluppo di applicazioni:
Nel DOM
⤽
Copia codice 

// Seleziona tutti gli elementi pari di una lista
// (":odd" seleziona i dispari)
$("ul#menu li:even"):
// Seleziona i primi 4 paragrafi della pagina
$("p:lt(4)");
// Seleziona tutti i links contenenti il testo "clicca qui"
$("a:contains('clicca qui')")
Eventi
⤽
Oltre a l’evento ready() visto sopra, jQuery ha diverse funzioni legate alla gestione degli eventi. Il metodo bind(), per esempio, può associare un numero illimitato di eventi ad un singolo elemento:
Il metodo bind()
⤽
Copia codice 

// Facendo clic su un paragrafo della pagina,
// mostra un alert() con il suo contenuto
$("p").bind("click", function() {
   alert( $(this).text() );
});
Il modello di eventi jQuery è molto completo, dato che ogni evento ha due possibilità: se non si passa nessuna funzione, viene eseguito l’evento dell’elemento, se si passa una funzione, questa funzione sarà associata all’evento dell’elemento:
Asocia funzione all'evento
⤽
Copia codice 

// Esegue l'evento "onclick" su ogni paragrafo della pagina
$("p").click();
// Asocia una funzione all'evento "onclick"
// su ogni paragrafo della pagina
$("p").click(function() {
   alert( $(this).text() );
});
jQuery ha tante funzioni come eventi standard di JavaScript. Il nome di ogni funzione è lo stesso dell’evento senza il solito prefisso “on”: focus(), blur(), keyup(), mouseover(), mouseup(), resize(), submit(), ecc.
Inoltre, jQuery aggiunge un evento che non esiste in JavaScript ed è veramente utile per molte applicazioni: toggle(). A questo metodo vengono passate due funzioni, le cui esecuzioni si alternano in funzione delle volte che si fa clic sull’elemento.
La prima volta che si fa clic sull’elemento (e tutte le volte dispari), si esegue la prima funzione e la seconda volta che si clicca sull’elemento (e tutte le volte pari) esegue la seconda funzione:
Il metodo toggle()
⤽
Copia codice 

$("p").toggle(function(){
   alert("Mi sono appena attivato");
},function(){
   alert("Mi sono disattivato");
});