PROGRAMMIAMO
JS - Anatomia di un'istruzione jQuery
La struttura di un'istruzione

Diamo di nuovo un'occhiata alla prima (e unica, finora) istruzione jQuery che abbiamo incontrato:

$("#omino").attr("src","../immagini/omino2.jpg")

La struttura di tutte le istruzioni jQuery è piuttosto semplice e la sua forma è valida in generale. Gli elementi principali sono ben visibili già dal nostro primo esempio:

Anatomia istruzione jQuery

Come si vede dalla figura precedente possiamo in generale individuare quattro parti, separate l'una dall'altra da un punto, che compongono l'istruzione:

Anche senza aver mai programmato in jQuery non è difficile comprendere il significato della precedente istruzione: viene selezionato l'elemento con id = "omino" (presumibilmente un elemento img) e ne viene modificato l'attributo src.

Questa semplice struttura è usata in modo consistente in praticamente tutte le istruzioni jQuery. Per esempio:

$('p.articolo').html('Nuovo testo inserito');

seleziona tutti i paragrafi appartenenti alla classe articolo e sostituisce il testo html contenuto al loro interno con quello indicato fra parentesi.

Come si può notare già da questi primi esempi, il selettore può essere qualsiasi selettore CSS valido, ovvero per selezionare in jQuery si possono usare tutte le regole usate per selezionare gli  elementi in un foglio stile. In particolare jQuery sfrutta tutta la potenza dei nuovi selettori messi a disposizione dall'ultima versione CSS3 dei fogli stile.

Notiamo anche che l'uso dei singoli e dei doppi apici è assolutamente libero (l'unico caso in cui bisogna scegliere con attenzione è quando si vuole racchiudere fra apici una stringa che già contiene al proprio interno apici: in questo caso occorre alternare il tipo di apici usato).

Si osservi infine la potenza e sinteticità del selettore jQuery: $('p.articolo') seleziona in un colpo solo tutti i paragrafi di classe articolo presenti nel documento e applica a tutti l'azione indicata.

Consideriamo un ultimo esempio:

alert( $("#uno").html() );

Questa istruzione visualizza con un alert il contenuto html dell'elemento con id = 'uno'. Possiamo osservare qui due cose interessanti:

Bene, dopo questa brevissima carrellata, siamo ora in grado di approfondire maggiormente il funzionamento di questo potente e semplice strumento di programmazione.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it