全面解析jQuery $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<meta charset= "utf-8" >
<html>
<head>
<title>1-1</title>
<script type= "text/javascript" >
document.getElementById( "panel" ).onclick = function () {
alert( "元素已经加载完毕 !" );
}
/*执行错误*/
</script>
</head>
<body>
<div id= "panel" >click me.</div>
</body>
</html>
|
如果这样,还没有等待元素加载完就给 div#panel 绑定了一个事件，浏览器Console中会报错: TypeError:
document.getElementById(...) is null
更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().
把事件绑定放在body里,元素之后:
由于绑定事件在元素之后，所以可以成功获取 div#panel 的元素，并在 div#panel 上绑定点击事件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<meta charset= "utf-8" >
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id= "panel" >click me.</div>
<script type= "text/javascript" >
document.getElementById( "panel" ).onclick = function () {
alert( "元素已经加载完毕 !" );
}
/*正确执行*/
</script>
</body>
</html>
|
把事件绑定放在window.onload中进行事件绑定:
window.onload 事件的处理函数则在页面所有元素加载完成之后才执行，所以这里给获取元素并绑定事件也是可行的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<meta charset= "utf-8" >
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id= "panel" >click me.</div>
<script type= "text/javascript" >
document.getElementById( "panel" ).onclick = function () {
alert( "元素已经加载完毕 !" );
}
/*正确执行*/
</script>
</body>
</html>
jQuery的ready()方法传入绑定事件的方法:
<!DOCTYPE html>
<meta charset= "utf-8" >
<html>
<head>
<title>1-3</title>
<script src= "http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<script>
$(document).ready( function (){
document.getElementById( "panel" ).onclick = function () {
alert( "元素已经加载完毕 !" );
}
/*正确执行*/
});
</script>
</head>
<body>
<div id= "panel" >click me.</div>
</body>
</html>
|
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之后,对元素的操作才是安全的. $(document).ready() 仅在DOM准备好的时候执行一次,但可以多次绑定 ready 事件。
与ready相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候才会执行。 $(window).load(function(){…}) 会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.
如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行.
注意:ready()方法多次调用,传入的handler方法会串联执行(追加).而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.
$(document).ready()的三种简写
$( document ).ready(handler)
$().ready(handler)//(this is not recommended)
$(handler)
window对象和document对象
Window对象表示浏览器中打开的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp
Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/jsref/dom_obj_document.asp
Event对象
Event 即事件,代表了各种状态:http://www.w3school.com.cn/jsref/dom_obj_event.asp
事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.文中关注的onload就是其中一个事件.
onload事件
onload 事件: http://www.w3school.com.cn/jsref/event_onload.asp
onload 事件是在加载完成后立即发生.(注意其中的l是小写).
支持该事件的标签是: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件的JavaScript对象是: image, layer, window .注意这里并没有 document .
onload使用解析
最常用的就是 window.onload , 会等到整个页面及各种资源都加载完成之后再执行后面赋值的 function 行为.另外,可以在标签中使用 onload ,比如:
|
1
|
<body onload= "inlineBodyOnloadTimeCounter();" >
|
其中 inlineBodyOnloadTimeCounter() 是一个自定义的JavaScript function.
注意 jQuery ready() 的API文档中有这么一段:
The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
注释： ready() 方法和 <body οnlοad=""> 是不兼容的.
以上所述是小编给大家介绍的全面解析jQuery $(document).ready()和JavaScript onload事件的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
全面解析jQuery $(document).ready()和JavaScript onload事件相关推荐
- jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <metacharset="utf-8"> <ht ...
- jQuery中$(document).ready()和window.onload的区别
$(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onlo ...
- jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 > ...
- $(document).ready() 和 window.onload 的区别
参考资料: http://blog.csdn.net/lcc921528642/article/details/48379431 http://www.cnblogs.com/jiajia123/p/ ...
- jquery 中 $(document).ready() 与window.onload 的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- $(document).ready() 和 window.onload 方法比较
说明 页面加载文档完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件. Javascript 使用 window.onload 方法,而 jQuery 使用 $(document). ...
- $(document).ready()与window.onload的区别
1.执行时间: window.onload要等到页面所有元素加载完毕才执行,包括(图片.flash等) $(document).ready()在DOM结构绘制完毕后就执行,不必等到加载完毕. 2.执行 ...
- $(document).ready() 与 window.onload 的区别
$ (document).ready() 和 window.onload 在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的执行上 $ (document) ready() 和 wind ...
- jQuery中$(document).ready()和window.onload的区别？
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
最新文章
- C#Post文件上传
- Spring Boot - 手把手教小师妹自定义Spring Boot Starter
- 【opencv系列08】OpenCV4.X图像融合操作
- 角谷定理python输出变化过程,Python 100例——第十章----定理与猜想
- vijos p1002——过河(noip2005提高组T2)
- vs2012 entity framework mysql_MVC4,MVC3,VS2012+ entity framework Migration from Sqlserver
- PHP简单方法判断文件是否是图片 PHP best way to check if file is an image
- 《Redis+Nginx+设计模式+Spring全家桶+Dubbo》，附 PDF amp; 简历模板 下载
- 小程序picker下拉框选择时间，只需要年和月
- textbox点击后弹出系统键盘导致背景重置为白色的问题
- Number of failed login attempts exceeds threshold value
- docker部署redis集群
- Excel制作资产负债表
- 哈希表_实现插入、删除、查找元素操作（链地址法解决冲突）
- 排序算法7——归并排序
- python基础课程设计项目_Python+MySQL开发医院网上预约系统（课程设计）一
- 数字0-9的数量 (数位dp ，技巧)
- 数据可视化分析教学课件——FineBI实验册节选====商品分析
- 文献阅读—An exploratory study of congestion control techniques in Wireless Sensor Networks
- “绿多多”绿色资产谈过去的2018及+GEEKBANK.IO+版权猫ipMall.io的未来