All'interno della sezione HEAD del nostro HTML richiamiamo il collegamento alla libreria JQUERY (utilizziamo il CDN messo a disposizione del sito jquery).
Creiamo una funzione (scrivendola nella sezione HEAD oppure in un file esterno che sarà richiamato) cha avrà il computo di assegnare il colore rosso alla proprietà color tag
h1.
function miaFunzione() {
$('h1').css ('color','red');
}
Ogni comando jQuery è fatto di 4 parti: la funzione (il simbolo del $) il selettore (in questo caso h1) l'azione (in questo caso css) ed i parametri (in questo caso trattandosi dell'azione css sono due, l'attributo ed il valore)
Questa funzione verrà chiamata da un link.
<a href=# onClick="miaFunzione()">Premi qui per cambiare il testo in rosso</a>
Ecco il codice completo
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function miaFunzione() {
$('h1').css ('color','red');
}
</script>
</head>
<body>
<h1>Testo scritto all'intero di un tag H1</h1>
<a href=# onClick="miaFunzione()">Premi qui per cambiare il testo in rosso</a>
</body>
</html>
Se si vuole che una funzione venga eseguita al caricamento della pagina bisogna definirla all'intenro della funzione
$(document).ready(function () {
miaFunzione();
});
Ecco l'esempio completo
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function miaFunzione() {
$('h1').css ('color','red');
}
$(document).ready(function () {
miaFunzione();
});
</script>
</head>
<body>
<h1>Testo scritto all'intero di un tag H1</h1>
</body>
</html>
Ultimo esempio
Alla funzione viene passato il parametro nuovoColore, e viene chiamata una volta al caricamento della pagina ed una volta da un link
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function miaFunzione(nuovoColore) {
$('h1').css ('color',nuovoColore);
}
$(document).ready(function () {
miaFunzione('red');
});
</script>
</head>
<body>
<h1>Testo scritto all'intero di un tag H1</h1>
<a href=# onClick="miaFunzione('green')">Premi qui per cambiare il testo in rosso</a>
</body>
</html>
Nessun commento:
Posta un commento