Tutorial jquery, il nostro primo programma, aggiungere e rimuovere una classe

Pubblicato: gennaio 6, 2012 in Jquery, Risorse

Pronti per la seconda lezione?

Nella prima abbiamo visto come importare la libreria jquery all’interno del nostro sito web e fare comparire, una volta caricato tutto il sito, un bel popup.

Jquery come è stato detto interviene direttamente sul dom del nostro sito andando ad intervenire sui selettori css.

Ecco il nostro primo programma della scorsa lezione:

$(document).ready(function(){

alert(‘questo è il mio primo programma in jquery’);

});

Come abbiamo ripetuto $ sta per jquery, come dice il codice “parlante” sta ad indicare: Quando il documento è pronto attiva la funzione sottostante, cioè l’alert.

Tutto questo può essere ancora di più abbreviato in questo modo:

$(function(){

alert(‘questo è il mio primo programma in jquery’);

});

Fantastico vero?

Ora vediamo come modificare una classe di un determinato elemento all’interno del codice html

Supponiamo che abbiamo nella nostra pagina web un paragrafo <p>

All’interno di questo paragrafo vogliamo modificare il colore del testo.

$(function(){

$(‘p’).css(‘color’,’red’);

});

Tutte le scritte contenute all’interno del paragrafo p saranno di colore rosso

Il nostro cliente ci ha commissionato una modifica sul sito web, tutti i caratteri in grassetto su una sola pagina dovranno essere più grandi e di colore rosso.

Il testo contenuto tra i tag <strong></strong> è ripetuto circa una settantina di volte.

Dovremmo quindi andare a creare una classe con le caratteristiche che ci ha detto il nostro cliente ed andare a modificare manualmente tag dopo tag aggiungendo la classe.

Un lavoro noioso, che ci richiede del tempo e che non ci da la garanzia di farlo correttamente , in quanto potremmo saltare qualche tag.

Jquery ci viene in aiuto.

All’interno della pagina da modificare creiamo questo codice.

$(function(){

$(‘strong’).addClass(‘grassetto’);

})

Ecco quindi che il testo contenuto all’interno del tag strong sarà del colore e delle dimensioni che il vostro cliente vi avrà detto di fare, con due righe di codice e senza nessun margine di errore.

Jquery ha aggiunto a tutti i strong la classe grassetto che abbiamo creato nel nostro foglio di stile.

Per rimuovere la classe in questione invece faremo la stessa cosa ma con la proprietà

$(‘strong’).removeClass(‘grassetto’);

Lascia un commento

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...