开发学院网页设计 JavaScript jQuery 练习[一]: 准备工作阅读

jQuery 练习[一]: 准备工作

　2010-06-11 00:00:00　来源：WEB开发网　　　

核心提示： 用 jQuery 的方式, 上面代码可以改为: <!doctypehtml><html><head><scripttype="text/javascript"src="http://code.jquery.com/jquer

用 jQuery 的方式, 上面代码可以改为:

<!doctype　html> <html> <head> <script　type="text/javascript"　src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script　type="text/javascript"> 　　　　$(document).ready(function()　{ 　　　　　　　　alert("Hello"); 　　　　}); </script> </head> <body> ... </body> </html>　

简写方式:

<!doctype　html> <html> <head> <script　src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> 　　　　//完整的写法　　　　jQuery(document).ready(function()　{　alert("Hello");　}); 　　　　//jQuery　可简写为　$ 　　　　$(document).ready(function()　{　alert("Hello");　}); 　　　　//$(document)　可以简写为　$() 　　　　$().ready(function()　{　alert("Hello");　}); 　　　　//$(document).ready()　也可以简写为　$() 　　　　$(function()　{　alert("Hello");　}); </script>　 </head> <body> ... </body> </html>　

$(document) 是 jQuery 的对象, 类似又不同于 window.document;

jQuery 有着自己的一套体系(对象、方法、事件等).

$(document).ready() 类似又不同于(早于) window.onload(), 且前者可重复使用:

<!doctype　html> <html> <head> <script　src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> 　　　　$(function()　{　alert("Hello　jQuery　1")　}); 　　　　window.onload　=　function()　{　alert("Hello　JavaScript　1")　};　//这会被覆盖　　　　window.onload　=　function()　{　alert("Hello　JavaScript　2")　}; 　　　　$(function()　{　alert("Hello　jQuery　2")　}); </script> </head> <body> ... </body> </html>　

window.onload() 发生在页面载入完成时,

$(document).ready() 发生在页面主体框架载入完成时(或许某个图片还没下载完);

当需要这个时机时, 我更喜欢把代码放在页尾:

<!doctype　html> <html> <head> <script　src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script> 　　　　window.onload　=　function()　{　alert("Hello　4")　}; 　　　　$(function()　{　alert("Hello　3")　}); </script> </head> <body>

页面内容

<script> 　　　　alert("Hello　1"); </script> </body> </html> <script> 　　　　function　fun()　{　alert("Hello　2")　}; 　　　　fun(); </script>　

用什么工具呢? 听说有很多, 我觉得 VS 就不错, 还有代码提示, 就是太慢了, 不如自己写一个:

http://files.cnblogs.com/del/JavaScriptTest2.rar

工具界面:

jQuery 练习[一]: 准备工作