PDA

View Full Version : [Html + JQuery] jquery non funziona su netbeans

forza_sugar
06-10-2013, 19:20
Ciao a tutti,
qualcuno riesce a spiegarmi perchè il seguente codice Jquery non funziona su Netbeans 7.2.1?
Dovrebbe solamente colorare di blu la parola test cliccandoci sopra ma avviando l'applicazione da Netbeans cliccandoci sopra non accade nulla.
Ho aggiunto la libreria e gli indirizzi sono corretti ma netbeans non esegue assolutamente il codice jquery.

<html>
<head>
<title>JQuery progetto di test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$ ("h1").click (function() {
$ (this). addClass("Blue");
});
});

</script>
<style type="text/css">j
.Blue {color:blue;}
</style>
</head>
<body>
<h1>Test.</h1>
</body>
</html>
Player1
07-10-2013, 13:34
Forse è colpa di questa "j" :

[..]
<style type="text/css">j
.Blue {color:blue;}
[..]
ndakota
07-10-2013, 16:24
Anche lo spazio dopo i $ non mi convince.
OoZic
07-10-2013, 21:28
$("h1").click(function() {
$(this).addClass("Blue");
});


demo funzionante: http://jsfiddle.net/z3ZR4/


- gli spazi non ci devono essere.
- la 'j' è un typo da togliere

- consiglio vivamente di caricare jquery alla fine del documento prima della chiusura del body, velocizzi il caricamento della pagina in quanto gli <script> sono caricati in modo sincrono quindi fin che lo script non carica la pagina non prosegue nel rendering.

- dato che carichi lo script alla fine del documento non serve la funzione $(document).ready(function(){ ... });

il codice correto sarebbe:

<html>

<head>
<title>JQuery progetto di test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.Blue {
color:blue;
}
</style>
</head>

<body>
<h1>Test.</h1>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$("h1").click(function() {
$(this).addClass("Blue");
});
</script>
</body>

</html>
forza_sugar
07-10-2013, 22:17
ok funziona
grazie