首页 > 编程笔记 > JavaScript笔记 > jQuery事件
jQuery ready和JS onload事件的区别
在 jQuery 中,我们使用 $(document).ready() 来替代 JavaScript 中的 window.onload,但这并不是简单的替换。实际上 jQuery 的 ready 事件和 JavaScript 的 onload 事件虽然有着相同的功能,但是两者之间也有着细微的区别。
语法:
举例:
图 1:JavaScript 的 onload 事件
在这个例子中,所有 DOM 元素加载完成后还不能触发 onload 事件,必须等到外部 CSS 文件以及图片加载完成才可以。
在 JavaScript 中,window.onload 只能调用一次,如果多次调用,则只会执行最后一个。
举例:多次调用 window.onload
图 2:多次调用 window.onload 的效果
从这个例子可以看出,如果多次调用 window.onload,则 JavaScript 只会执行最后一个 window.onload。为了解决这个问题,我们大多数时候是使用 addEventListener() 来实现多次调用的效果,代码如下。
语法:
举例:
图 3:jQuery 的 ready 事件
在这个例子中,只需要等所有 DOM 元素加载完成就可以执行 ready 事件,而不需要再等到外部 CSS 文件以及图片加载完成。
在 jQuery 中,ready 事件是可以多次执行的。从这里可以看出 jQuery 有非常良好的兼容性。
举例:多次调用 $(document).ready()
图 4:多次调用 $(document).ready() 的效果
对 jQuery ready 和 js onload 事件的区别我们可以总结如下:
JavaScript的onload事件
在 JavaScript 中,onload 表示文档加载完成后再执行的一个事件。语法:
window.onload = function(){
……
}
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script> window.onload = function(){ var oBtn = document.getElementById("btn"); oBtn.onclick = function(){ alert("欢迎来到 新宝库!"); }; } </script> </head> <body> <input id="btn" type="button" value="提交"><br/> <img src="img/1.png" alt=""> </body> </html>程序执行效果如图 1 所示。
图 1:JavaScript 的 onload 事件
在这个例子中,所有 DOM 元素加载完成后还不能触发 onload 事件,必须等到外部 CSS 文件以及图片加载完成才可以。
在 JavaScript 中,window.onload 只能调用一次,如果多次调用,则只会执行最后一个。
举例:多次调用 window.onload
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function(){ console.log("第1次调用"); } window.onload = function(){ console.log("第2次调用"); } window.onload = function(){ console.log("第3次调用"); } </script> </head> <body> </body> </html>程序执行结果如图 2 所示。
图 2:多次调用 window.onload 的效果
从这个例子可以看出,如果多次调用 window.onload,则 JavaScript 只会执行最后一个 window.onload。为了解决这个问题,我们大多数时候是使用 addEventListener() 来实现多次调用的效果,代码如下。
window.addEventListener("load", function(){}, false);
jQuery的ready事件
在 jQuery 中,ready 也表示文档加载完成后再执行的一个事件。语法:
$(document).ready(function(){
……
})
举例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script> $(document).ready(function(){ $("#btn").click(function(){ alert("欢迎来到 新宝库!"); }); }) </script> </head> <body> <input id="btn" type="button" value="提交"><br/> <img src="img/1.png" alt=""> </body> </html>预览效果如图 3 所示。
图 3:jQuery 的 ready 事件
在这个例子中,只需要等所有 DOM 元素加载完成就可以执行 ready 事件,而不需要再等到外部 CSS 文件以及图片加载完成。
在 jQuery 中,ready 事件是可以多次执行的。从这里可以看出 jQuery 有非常良好的兼容性。
举例:多次调用 $(document).ready()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ console.log("第1次调用"); }) $(document).ready(function() { console.log("第2次调用"); }) $(document).ready(function() { console.log("第3次调用"); }) </script> </head> <body> </body> </html>程序执行结果如图 4 所示。
图 4:多次调用 $(document).ready() 的效果
对 jQuery ready 和 js onload 事件的区别我们可以总结如下:
- jQuery 的 ready 事件仅仅是 DOM 元素加载完成就可以执行,而 JavaScript 的 onload 事件在 DOM 元素加载完成后还需要等所有外部文件也加载完成才可以执行;
- 在JavaScript 中,onload 只能调用一次,如果多次调用,则只会执行最后一个。在 jQuery 中,ready 事件可多次执行的;
- jQuery 的 ready 事件相对于 JavaScript 的 onload 事件来说,极大地提高页面的响应速度,有着更好的用户体验。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算