jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件
Why we need a right time?
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1title>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*执行错误*/
script>
head>
<body>
<div id="panel">click me.div>
body>
html>
wrong case
如果这样,还没有等待元素加载完就绑定事件,
浏览器Console中会报错: TypeError: document.getElementById(...) is null 更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert(). 第一种是把事件绑定放在body里,元素之后:DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2title>
head>
<body>
<div id="panel">click me.div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
script>
body>
html>
right way 1: in body
第二种是放在window.onload中进行事件绑定:
DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
}
script>
head>
<body>
<div id="panel">click me.div>
body>
html>
right way 2: window.onload
第三种是jQuery的ready()方法传入绑定事件的方法:
DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Paneltitle>
<script src="jquery-1.11.2.js" type="text/javascript">script>
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
})
script>
head>
<body>
<div id="panel">click me.div>
body>
html>
right way 3: ready()
jQuery $(document).ready()和window.onload
根据ready()方法的API说明http://api.jquery.com/ready/ 这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded. 即当DOM加载完毕的时候,执行这个指定的方法. 因为只有document的状态ready之后,对page的操作才是安全的. $(document).ready()仅在DOM准备好的时候执行一次. 与之相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候. $(window).load(function(){…})会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行. 而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机. 如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行. 注意:ready()方法多次调用,传入的handler方法会串联执行(追加). 而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的. 看例子:DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>title>
<script src="jquery-1.11.2.js" type="text/javascript">script>
<script type="text/javascript">
var startTime = new Date().getTime();
$(document).ready(function () {
var readyTime = new Date().getTime() - startTime;
$("jQuery的ready() : " + readyTime + " ms").appendTo("body");
})
$(document).ready(function () {
var readyTime2 = new Date().getTime() - startTime;
$("jQuery的ready() 2 : " + readyTime2 + " ms").appendTo("body");
})
window.onload = function () {
var windowOnLoadTime = new Date().getTime() - startTime;
$("window.onload : " + windowOnLoadTime + " ms").appendTo("body");
}
window.onload = function () {
var windowOnLoadTime2 = new Date().getTime() - startTime;
$("window.onload 2 : " + windowOnLoadTime2 + " ms").appendTo("body");
}
script>
head>
<body>
<img src="http://www.google.com.hk/logos/2011/cezanne11-hp.jpg" style="width:200px;height:200px;"/>
body>
html>
在浏览器中打开显示如下:
例子说明并验证了前面提到的两个问题:
1.jQuery的ready()方法调用时机比window.onload提前.
window.onload要等待页面中的资源(图像)加载完成,而ready()在DOM树建立好之后就调用了.
2.ready()方法调用后,传入的方法是追加的形式,所以两个方法都调用了;
而window.onload是赋值的形式,所以后面的方法覆盖了前面的方法.
$(document).ready()的三种简写
$(document).ready()有三种方式来写,它们是等价的:$( document ).ready( handler ) $().ready( handler ) (this is not recommended) $( handler )
因为.ready()方法仅在当前document的jQuery对象上才可以调用,所以selector可以被省略.