当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jQuery的文档就绪方法 -创新互联

jQuery的文档就绪方法 -创新互联

作者：创新互联文章来源：前端开发部点击数：更新时间：2010-12-18
在以上几个章节中会经常看到以下这种代码形式。
[HTML] 纯文本查看复制代码运行代码
$(document).ready(function(){
//代码
})
此种用法的作用就是等文档全部加载完成后再去执行function中的代码。
为什么要这么做呢，下面通过一个完整的代码来分析一下：
[HTML] 纯文本查看复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.cdxwcx.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
}
</style>
<script type="text/javascript" src="https://www.cdxwcx.com/.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").hide();
})
</script>
</head>
<body>
<div></div>
</body>
</html>
上面代码能够将div元素隐藏。但是我们如果将代码修改如下：
[HTML] 纯文本查看复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.cdxwcx.com/" />
<title>创新互联</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
}
</style>
<script type="text/javascript" src="https://www.cdxwcx.com/js"></script>
<script type="text/javascript">
$("div").hide();
</script>
</head>
<body>
<div></div>
</body>
</html>
运行上面的代码却不能够隐藏div元素。
下面就来分析一下去掉文档就绪方法不能够隐藏div元素的原因：
由于代码是顺序执行的，如果没有就绪函数的话，那么当代码执行到$("div").hide()时候，文档中的div元素还没有加载完成，那么$("div")也就无法获取到div对象，于是$("div").hide()就无效了。
扩展说明:
上面我们所讲述的其实是ready事件：当文档加载完成时，就会触发ready事件，这个时候就会执行通过ready()方法绑定到ready事件的事件处理方法。
jQuery对元素进行拖动并重新排序 :上一篇
jQuery对象和DOM对象的区别 -创新互联 :下一篇

前端开发

域名注册

虚拟主机

网站建设

服务器租用

营销推广

网站程序

移动互联网

企业邮箱

网站备案

jQuery的文档就绪方法 -创新互联

jQuery的文档就绪方法 -创新互联

jQuery相关文章