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’);
