资源:
1、HelloWorld程序:
<html> <head> <title>Jquery demo</title> <script src="./js/jquery-1.3.2.min.js"></script> <script Language = "JavaScript"> $(document).ready(function(){ $("#bn").click(function(){ alert("Hello, world!"); }); }); </script> </head> <body> <input type = "button" id = "bn" value = "sign in" /> </body> </html>
2、感受Jquery的简洁
不使用Jquery的情况:
<html> <head> <title>Test without jQuery</title> <script Language="JavaScript"> <!-- function window_onload() { var imgl = window.document.getElementById('imgl'); imgl.style.display = 'none'; } function btnl_click() { var imgl = window.document.getElementById('imgl'); if(imgl.style.display == 'none') { imgl.style.display = ''; } else { imgl.style.display = 'none'; } } //--> </script> </head> <body onload = "window_onload()"> <input type = "button" id = "btnl" name = "btnl" value = "JavaScript" onclick = "btnl_click()" /> <br> <img id = "imgl" src = "./img/topcat.jpg" /> </body> </html>
使用Jquery:
<html> <head> <title>Test with jQuery</title> <Script Language = "JavaScript" src = "./js/jquery-1.3.2.min.js"></Script> <script Language = "JavaScript"> <!-- $(document).ready(function() { $('#imgl').hide(); $('#btnl').click(function() { $('#imgl').toggle(); }) }) //--> </script> </head> <body> <input type = "button" id = "btnl" name = "btnl" value = "jQuery" /> <br> <img id = "imgl" src = "./img/topcat.jpg" /> </body> </html>