jQuery: ancora sui selector



La libreria jQuery  offre molteplici modalità per selezionare gli elementi di una pagina HTML.

Con i selettori (in inglese Selectors) e le loro possibili concatenazioni si può con grande semplicità selezionare un singolo o più elementi delle pagine e su questi applicare effetti o animazioni.

Facciamo un esempio: vorremmo nascondere tutti i link presenti su una qualsiasi pagina HTML. Operando con il classico javascript avremmo bisogno di molte linee di codice, dovremmo tenere conto delle inevitabili incompatibilità tra diversi browser, ecc.

L’approccio con jQuery rende tutto molto semplice, come dice anche il motto che la contraddistingue: Write Less, Do More.
Il semplice comando, compatibile su tutti i browser è:

$("a").hide();

Ma proviamo a complicarci la vita: vogliamo nascondere tutte le immagini su cui c’è un link e sostituirle con la scritta “IMMAGINE”. Quindi dovremmo passare da un codice HTML come:

<a href='pagina.htm' border=0><img scr=img.gif></a>

a questo:

<a href='pagina.htm' border=0>IMMAGINE</a>

Tralasciamo come farlo con il codice javascript (probabilmente, e se siamo bravi, almeno una decina di linee di codice) e passiamo subito all’esempio realizzato con jQuery:

$("a > img").text("IMMAGINE");

Wow, tutto in una riga, praticamente abbiamo eseguito l’operazione nel modo più logico.

Consideriamo l’algoritmo e la parte di jQuery che lo realizza:

1) seleziona tutti gli elementi link (a) che abbiamo come figlio diretto una immagine (img) … $("a > img")

2) rimpiazza quanto trovato con il testo “IMMAGINE”  … text("IMMAGINE")

Come vedere, una volta imparata la sintassi di jQuery tutto diventa facile.

Potete trovare un conciso Reference Manual di jQuery su ComputerSpace.

aBellina (www.abspace.it)

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest