WEB开发网
开发学院网页设计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 练习[一]: 准备工作

查看原图(大图)

编缉推荐阅读以下文章

  • jQuery 练习[二]: 获取对象(3) - 根据属性、内容匹配, 还有表单元素匹配
  • jQuery 练习[二]: 获取对象(2) - 定位子对象
  • jQuery 练习[二]: 获取对象(1) - 基本选择与层级

上一页  1 2 

Tags:jQuery 练习 准备

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接