$(document).ready()与$(window).load()的区别
来源:互联网 发布:uplay修改host软件 编辑:程序博客网 时间:2024/04/29 09:27
虽说很早就开始接触JavaScript,自己也用JavaScript编写过许多代码,如之前的web版码表计时器,就写了近500行代码,函数也写了10个左右。当时也就是想到哪里就写到哪里,行不通就另外找方法,根本不会考虑代码的性能、作用及优化。
随着在实践中对JavaScript的应用,对JavaScript的认识也在不断地深入。这里,就为大家介绍一下$(document).ready()于$(window).load()的区别。
1.执行时间不同:从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。
2.可以被执行的次数不同:$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;
<script>$(document).ready(function(){alert("test1");//这段代码会被执行});$(document).ready(function(){alert("test2");//这段代码会被执行});$(window).load(function(){alert("test1");//这段代码不会被执行});$(window).load(function(){alert("test2");//这段代码将被执行});</script>
3.执行的效率不同:如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。
<script>$(document).ready(function(){$(".the_body a").attr("onclick","alert('test')");});$(window).load(function(){$(".close_btn").click(function(){$("#app_down").hide();});});</script>
- document.ready()与window.load()的区别
- $(document).ready()与$(window).load()的区别
- $(document).ready()与$(window).load()的区别
- document.ready()与window.load()的区别
- jQuery基础知识 window.load 与 document.ready的区别
- window.load和document.ready的区别
- document load 与document ready的区别
- window.onload与$(document).ready()的区别
- window.onload 与 document.ready 的区别
- $(document).ready() 与 window.onload的区别
- window.onload与document.ready的区别
- $(document).ready() 与window.onload的区别
- $(document).ready() 与window.onload的区别
- $(document).ready()与window.onload的区别
- window.onload与$((document).ready())的区别
- $(document).ready() 与window.onload的区别
- $(document).ready()与window.onload的区别
- document.ready与window.onload的区别
- 一个简单的CSS弹出窗
- JavaScript数值转换函数(Number(),parseInt(),parseFloat(),Math)总结
- 学习CSS(3)
- JavaScript设置倒计时及倒计时弹窗
- UVALive 6955Finding Lines
- $(document).ready()与$(window).load()的区别
- 手机端JavaScript实战技巧小总
- DICOM:C-GET与C-MOVE对比剖析
- 在虚拟机下安装Linux操作系统遇到的问题
- CSS开发中应该注意的问题
- 清除浮动的5种方式
- 纯CSS制作下拉导航
- 判断一个对象是否为数组的方法
- Dalvik指令集 (smali汇编)