Skip to content
giugno 15, 2009 / Davide

jQuery…primo approccio: .addClass

In questo primo articolo parleremo di jQuery introducendo cosa è, cosa può fare ed il primo elemento addClass.

jQuery

jQuery è una libreria javascript che permette la manipolazione veloce di una pagina HTML, gestire eventi, creare animazioni e aggiungere interazioni AJAX.

Grazie a jQuery è possibile effettuare operazione, anche di una certa complessità, in modo semplice e lineare nel rispetto del motto:  “write less, do more”.

In questo primo articolo:

  • creeremo una pagina html di esempio;
  • imposteremo un lista non ordinata;
  • assegneremo una classe alla lista in modo da modificarne l’aspetto.

test_addClass.html

test_addClass.html

Come funziona

Tralasciando le prime 5 righe che sono comuni a qualsiasi file html, nella riga 6 viede “incluso” all’interno del documento la libreria jQuery versione 1.3.2.

Al rigo 7 è stato generato il link al file css.

Dalla riga 8 alla 12,  invece si può leggere il primo pezzo di codice jQuery. Prima di tutto si apre il tag SCRIPT per avvisare il browser che ci accingiamo a scrivere codice javascript, quindi con $() (che altro non è che una abbreviazione di jQuery()) chiediamo al browser, quando il documento (document) è pronto (.ready), di eseguire la funzione $(‘#lista > li’).addClass(‘orizzontale’), ovvero al tag li “child” (>) dell’id lista, assegnerà la classe (.addClass) “orizzontale”. Infine chiudiamo lo </SCRIPT>.

Successivamente, all’interno di body si devinisce un conteiner ed una lista non ordinata lista (righe dalla 15 alla 22).

Qui sotto il file css deve è definita la classe orizzontale.

test_addClass_css

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: