Lezione #id-jq-2013-0002#
Analizziamo un semplice esempio per comprendere la sintassi ed il funzionamento di JQuery.
Vediamo il seguente 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(){
$( "a" ).click(function( event ) {
alert( "Grazie per la visita" );
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="#">CLICCAMI PER VEDERE JQUERY IN AZIONE!</a>
</body>
</html>
Analizziamo le righe:
$(document).ready(function(){
$( "a" ).click(function( event ) {
alert( "Grazie per la visita" );
event.preventDefault();
});
})
Possiamo notare:
– Ogni funzione è contenuta all’interno di – $(document).ready -, che fa eseguire qualunque operazione solo quando il documento HTML è .ready, cioè completamento scaricato nel Browser.
– Ogni funzione è contenuta tra una parentesi tonda di apertura – (function() }); – e una di chiusura che contiene anche le parentesi graffe-.
– i punto e virgola – ; – chiude ogni comando
In questo caso particolare una volta che il documento si scarica completamente ed è oronto all’utilizzo, JQuery preleva dal DOM il contenuto fra i tag – a – (collegamenti ipertestuali), e al click su di essi apri una finestra di sistema di tipo – alert – con il messaggio – Grazie per la visita -.
L’istruzione – event.preventDefault() – disabilita il comportamento di default dell’evento – click – del mouse.
