jquery入门-文档就绪

来源：互联网发布：软件对比分析表编辑：程序博客网时间：2024/05/21 09:06

我们在编写页面代码的时候，通常根据行为-结构-样式分离的原则，将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>

<title>jquery 属性选择器</title>

$(function(){

$('#sayhello').click(function(){

alert("hello");

});

//属性选择器的操作

alert($("div[flag=1]").text());

});

或者

window.onload=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>

SAY HELLO!

</p>

SAY GOODBYE!

</p>

//在此次这样写可以正确执行，因为DOM已经加载完毕。

//这也是很多JS脚本或者jQuery脚本常放到body模块最后的原因，当然更好的方法是放到独立的文件中去。

$('#saygoodbye').click(function(){alert("goodbye")});

</dody>

</html>

0 0