JS中onload事件与JQuery中ready的区别

前水员

于 2021-03-25 14:03:52 发布

阅读量323

点赞数

分类专栏：前端 js JQuery 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/qq_43465434/article/details/115202747

版权

前端同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

28 篇文章 1 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

我们知道，浏览器对一个HTML文档是从上到下依次解析，所以我们在页面中写入操作DOM的JS代码的同时，将操作DOM的JS代码写到DOM内容的上方，就会报错，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let p1 = document.querySelector("#p1");
			console.log(p1.innerHTML);
		</script>
		<p id="p1">hello,world!</p>
	</body>
</html>

执行代码结果：
在这里插入图片描述
由于这段代码在执行时会先执行JS代码，之后才会处理JS标签下面的p标签，所以报错会提示p标签的内容为空。

JS和JQuery分别给我们提供了一种事件来解决这种情况：

JavaScript中的onload事件：

onload事件的定义：onload 事件会在页面或图像加载完成后立即发生。
它有两个特点：

在整个页面，onload事件只允许被注册一次；若注册多次，则后者会覆盖前者
onload事件在所有DOM元素(css,image,…)加载完成后才会触发

还是刚才的代码，我们加上onload事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				let p1 = document.querySelector("#p1");
				console.log(p1.innerHTML);
			}
			
		</script>
		<p id="p1">hello,world!</p>
	</body>
</html>

输出结果：
在这里插入图片描述
此时我们如果注册多个onload事件，则后者的onload事件会覆盖前者：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				let p1 = document.querySelector("#p1");
				console.log(p1.innerHTML);
			}
			window.onload = function(){
				let p2 = document.querySelector("#p2");
				console.log(p2.innerHTML);
			}
		</script>
		<p id="p1">hello,world!</p>
		<p id="p2">我是p2，第一次注册的onload事件被覆盖了</p>
	</body>
</html>

输出结果：
在这里插入图片描述

JQuery中的ready方法：

在W3school中的定义中，ready的定义与用法是被这样描述的：

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。
允许使用以下三种语法：
1. $(document).ready(function)
2. $().ready(function)
3. $(function)

与onload的一样，它也有两种特点，但是与onload特点不同

在整个页面中，ready事件可以允许被注册多次
在DOM结构加载完成后触发（即上面的定义）

我们使用一开始的代码，并使用ready事件方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			// window.onload = function(){
			// 	let p1 = document.querySelector("#p1");
			// 	console.log(p1.innerHTML);
			// }
			// window.onload = function(){
			// 	let p2 = document.querySelector("#p2");
			// 	console.log(p2.innerHTML);
			// }
			
			$(document).ready(function(){
				
				let p1 = document.querySelector("#p1");
				console.log(p1.innerHTML)
				
			})
		</script>
		<p id="p1">hello,world!</p>
	</body>
</html>

输出结果：
在这里插入图片描述
修改代码，展示ready事件的可多次注册的特点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			// window.onload = function(){
			// 	let p1 = document.querySelector("#p1");
			// 	console.log(p1.innerHTML);
			// }
			// window.onload = function(){
			// 	let p2 = document.querySelector("#p2");
			// 	console.log(p2.innerHTML);
			// }
			
			$(document).ready(function(){
				
				let p1 = document.querySelector("#p1");
				console.log(p1.innerHTML)
				
			})
			$(document).ready(function(){
				
				let p2 = document.querySelector("#p2");
				console.log(p2.innerHTML)
				
			})
		</script>
		<p id="p1">我是p1</p>
		<p id="p2">我是p2，我和p1同时出现了！</p>
	</body>
</html>