window.onload和$(document).ready()比较
浏览器在页面加载完毕后,JS通常使用window.onload方法为DOM元素添加事件,而jQuery使用的是$(document).ready()方法。两者功能相似,但也有细微差异,下面简要对比一下两者之间的区别。
| window.load | $(document).ready() | |
| 执行时机 | 必须等待网页中所有内容加载完毕后才能执行(包括图片等) | 只要网页中的DOM结构绘制完毕就执行(与DOM相关的文件此时可能还未下载完毕) |
| 使用情况 |
1.不能同时执行多个,若编写多个函数只执行最后一个(前面的被覆盖)。 window.onload = function() test1{ alert("function1");}; window.onload = function() test2{ alert("function2");} 最终输出结果为"function2"。 2.如果想实现多个函数的调用,可以创建一个新的函数来包含它们。 window.onload = function(){ test1(); test2(); } |
1.能够同时编写多个函数,按注册顺序执行。 $(document).ready(function(){ test1(); }); $(document).ready(function(){ test2(); }) 两次都输出。 2.如果想实现window.onload一样的功能,调用load()方法。 $(window).load(function(){ //代码 }) |
| 简化 | 无 |
以下两种形式与$(document).ready()等价,但更简洁。 1.$().ready(function(){ //代码 }); 2.$(function(){ //代码 }); |
全文完,欢迎各位前辈批评指正。
window.onload和$(document).ready()比较的更多相关文章
- window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- js常见执行方法window.onload = function (){},$(document).ready()
1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...
- window.onload和document.ready的区别
window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...
- window.onload与$(document).ready()的区别
对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...
- window.onload与$(document).ready()区别
2013-12-08 17:11:34 window.onload一次只能执行一个程序,而$(document).ready()可以按照先后顺序执行多个程序. eg: function one(){ ...
- JS ——window.onload与$(document).ready()
我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的ready()方法.那么 ...
- 【jQuery】window.onload 和 $(document).ready() 的区别
... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...
- 菜鸟学JS(五)——window.onload与$(document).ready()
我们继续说JS,我们常常在页面加载完成以后做一些操作,比如一些元素的显示与隐藏.一些动画效果.我们通常有两种方法来完成这个事情,一个就是window.onload事件,另一个就是JQuery的read ...
随机推荐
- Hive 作业优化
1.Join原则将条目少的表/子查询放在 Join的左边. 原因是在 Join 操作的 Reduce 阶段,位于 Join左边的表的内容会被加载进内存,将条目少的表放在左边,可以有效减少发生内存溢出的 ...
- object is not an instance of declaring class
错误原因:invoke方法的时候,应该是类的实例对象,而不是类本身 解决方法:把 PowerMockito.doReturn(index_expect).when(IndexController.cl ...
- Swoole系列(一):简介
前言: 实际上作为一名PHP程序员,我很清楚PHP的确有很多局限性,比如Unix系统编程.网络通信编程.异步io,大部分PHPer不懂.PHP界也确实没有这样的东西.Swoole开源项目就是为了弥补P ...
- 解决pip安装模块报错Cannot fetch index base URL http://pypi.python.org/simple/
产生这个问题的原因呢和github一样,因为他们用的cdn被墙.经小伙伴反馈,解决办法如下. 通过指定国内镜像源来安装: pip --trusted-host 镜像源 install 模块名 -i 镜 ...
- Servlet Cookie 处理
Servlet Cookie 处理 Cookie 是存储在客户端计算机上的文本文件,并保留了各种跟踪信息.Java Servlet 显然支持 HTTP Cookie. 识别返回用户包括三个步骤: 服务 ...
- poj 3469(网络流模版)
题目链接:http://poj.org/problem?id=3469 思路:终于把网络流的模版测试好了,在Dinic和Sap之间还是选择了Sap,事实证明Sap确实比Dinic效率高,在此贴出自己的 ...
- Python_Selenium之鼠标右键
Python_Selenium之鼠标右键 一.步骤: (以百度为例)获取百度网址 找到需要右键的元素(定位),xpath表达式为“//*[@id='lg']/img” 然后,右键选择“在新标签页中打开 ...
- 水仙花数-python
题目: 求999以内的水仙花数? 分析: 如果一个3位数等于其各位数字的立方和,则称这个数为水仙花数. 例如:1^3 + 5^3+ 3^3 = 153,因此153就是一个水仙花数 我们需计算出153的 ...
- NGINX快速部署
NGINX快速部署 #!/bin/bash ############################################################################## ...
- hoj 2739 中国邮局问题
/*若原图的基图不连通, 或者存在某个点的入度或出度为 0 则无解. 统计所有点的入度出度之差 Di, 对于 Di > 0 的点, 加边(s, i, Di, 0); 对于 Di < 0 的 ...