我们在编写页面代码的时候,通常根据行为-结构-样式分离的原则,将HTML(结构)、样式(样式)、脚本(行为)放到不同的文件中。
在JS脚本中,我们通常会看到这样的代码(传统JS编码):
window.onload = function(){
//在这里添加执行代码
}
或者
window.onload = initAll;
function iniAll(){
//在这里添加这些代码
}
以上两种写法等价,表示在文档资源(包括:图片资源,页面上的Flash等视频资源)全部加载完成后,执行这里定义的代码。
这样做,可以保证代码对文档元素的操作是有效的,但缺点也很明显:
1、JS代码必须等页面的所有外部资源加载完毕,并且整个页面在浏览器窗口中显示完毕才能运行,可能会造成严重的延迟。
2、window对象的onload机制只允许指定一个函数,不能重复执行。
jQuery采用了一种简单有效的方式,可以避免以上问题:
jQuery(document).ready(function(){
//在这里添加代码
});
或者
jQuery(function(){
//在这里添加代码
});
或者
$(function(){
//在这里添加代码
});
以上三种写法等价,表示在DOM树(而不是外部资源)加载完毕之后就立即触发脚本的执行,效率上更高,且可多次调用执行。
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>jquery 属性选择器</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script>
$(function(){
$('#sayhello').click(function(){
alert("hello");
});
//属性选择器的操作
alert($("div[flag=1]").text());
});
或者
/*
window.οnlοad=function(){
document.getElementById("sayhello").innerHTML="hello";
};*/
//注意不能按照下面的写,否则脚本没有效果,因为代码是顺序执行的,如此写法代码执行时,DOM还没有加载完毕。
/*
$('#say').click(function(){
alert("hello");
}); */
//或者这样写,也不能正确执行,原因同上。
//document.getElementById("sayhello").innerHTML="hello";
</script>
</head>
<body>
<div flag="1">第一个DIV模块</div>
<div lag="2">第二个DIV模块</div>
<p id="sayhello">
SAY HELLO!
</p>
<p id="saygoodbye">
SAY GOODBYE!
</p>
<script>
//在此次这样写可以正确执行,因为DOM已经加载完毕。
//这也是很多JS脚本或者jQuery脚本常放到body模块最后的原因,当然更好的方法是放到独立的文件中去。
$('#saygoodbye').click(function(){alert("goodbye")});
<script>
</dody>
</html>