$(doucument).ready() 和 window.on load 的区别

最新推荐文章于 2025-03-07 00:40:03 发布

池塘鱼

最新推荐文章于 2025-03-07 00:40:03 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_41984887/article/details/105751000

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细比较了jQuery中的$(document).ready()与JS原生的window.onload方法。阐述了两者在执行时机、代码简化及多入口函数执行顺序上的区别，帮助开发者更好地理解并选择适合的页面加载事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function(){…}) 是jQuery的方法。window.onload 是js的原生方法。

二者功能相似：

在这两个方法里的jQuery或JS代码会在DOM元素加载完毕后才开始执行，避免在文档没有完全加载之前运行导致的一些错误，如访问一个还没有加载出来的元素。

并且，在这两个方法里的代码可以获得当前网页上的所有元素，并进行监听。

比较：

执行时机：$(document).ready() 函数内的语句执行时机是DOM元素加载完毕时，即网页结构加载完毕，但关联的文件未下载完，图片位加载出来时。而window.onload是网页的所有元素都加载完毕后才执行，包括图片、关联文件等。
可简写：
$(document).ready(function(){
//执行代码
});
$(function(){
//执行代码
});

window.οnlοad=function(){
//执行代码
}
$(window).load(function(){
//执行代码
});
当有多个入口函数时：$(document).ready()函数内的多个入口函数按顺序执行，从上到下。而window.onload则是后面编写的会覆盖前面编写的。

如下面的代码，分别用jQuery和JS写了两个两个入口函数，每个入口函数里都有一个alert弹窗。

执行结果：用jQuery写的两个弹窗依次执行，先“111”后“222”，用JS写的两个弹窗则只执行了第二个“222”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../jquery-1.8.3.min.js"></script>
		<script>
			$(document).ready(function(){
				alert("111");
			});
			$(document).ready(function(){
				alert("222");
			}); 
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				alert("111");
			}
			window.onload=function(){
				alert("222");
			}
		</script>
	</head>
	</body>
</html>