Lezione #id-jq-2013-0001#
Con questa lezione capiremo la sintassi e il funzionamento di base di JQuery.
Iniziamo con il codice di una pagina vuota HTML che carica il framework – jquery-2.0.3.js -:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <script type="text/javascript" src="js/jquery-2.0.3.js"></script> </head> <body> <p id="paragrafo1"> Primo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> </p> <p> Secondo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </body> </html>
Inoltre ci sono due paragrafi – tag p -, di cui il primo è identificato da – id=”paragrafo1″ -.
Se carico la mia pagina vedrò semplicemente i 2 paragrafi di testo.
Aggiungiamo altro codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p#paragrafo1').hide();
});
</script>
</head>
<body>
<p id="paragrafo1">
Primo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
</p>
<p>
Secondo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>
Ecco le righe JQuery:
<script type="text/javascript">
$(document).ready(function(){
$('p#paragrafo1').hide();
});
</script>
La sintassi è:
$(document).ready(function(){
azione1;
azione2;
});
Avvia le operazioni all’interno delle parentesi graffe della funzione(), solo quando il documento – $(document) – HTML è stato completamente scaricato – .ready – (IL METODO).
Notare che – $(document).ready(…); – contiene interamente – function(){} – parentesi graffe incluse.
Solo dopo che il documento HTML sarà completamente caricato nascondi il paragrafo con id=paragrafo1 – $(‘p#paragrafo1’).hide(); –
Se carichiamo la nostra pagina vedremo che il paragrafo 1 è stato nascosto.
Aggiungiamo dell’altro codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p#paragrafo1').hide();
$('a#paragrafo1Ancoraggio').click(function(){$('#paragrafo1').slideDown('slow');
});
});
</script>
</head>
<body>
<a href="#" id="paragrafo1Ancoraggio">CLICCA PER MOSTRARE IL PRIMO PARAGRAFO</a>
<p id="paragrafo1">
Primo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
</p>
<p>
Secondo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>
Ho aggiunto – a href=”#” id=”paragrafo1Ancoraggio” CLICCA PER MOSTRARE IL PRIMO PARAGRAFO – che è un testo cliccabile, che resta all’interno del documento – a href=”#” – identificato da – id=”paragrafo1Ancoraggio” -. Ho aggiunto inoltre:
$('a#paragrafo1Ancoraggio').click(function(){$('#paragrafo1').slideDown('slow');
});
JQuery preleva dal DOM – $(‘a#paragrafo1Ancoraggio’) – con il METODO -.click – avvia la funzione – {$(‘#paragrafo1’).slideDown(‘slow’);} – cioè al click del mouse farà riapparire il paragrafo1 con un effetto slide verso il basso lento – slow -. Caricare la pagina nel Browser per vedere l’effetto.
Ok adesso aggiungiamo il codice che ci permetterà di richiudere il paragrafo1:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p#paragrafo1').hide();
$('a#paragrafo1Ancoraggio').click(function(){$('#paragrafo1').slideDown('slow');
$('a#chiudiParagrafo').click(function(){$('#paragrafo1').hide('slow');
});
});
});
</script>
</head>
<body>
<a href="#" id="paragrafo1Ancoraggio">CLICCA PER MOSTRARE IL PRIMO PARAGRAFO</a>
<p id="paragrafo1">
Primo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<a href="#" id="chiudiParagrafo">CLICCA PER NASCONDERE IL PRIMO PARAGRAFO</a>
</p>
<p>
Secondo paragrafo. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>
Abbiamo aggiunto un testo cliccabile con – id=”chiudiParagrafo” –
<a href="#" id="chiudiParagrafo">CLICCA PER NASCONDERE IL PRIMO PARAGRAFO</a>
Abbiamo aggiunto la riga:
$('a#chiudiParagrafo').click(function(){$('#paragrafo1').hide('slow');
});
Che significa JQuery(prevela dal DOM il tag a con id chiudiParagrafo). al click avvia la funzione (){(id paragrafo1).nascondi(‘effetto a tendina lento’);});
