$(document)_ready与 window_onload的区别

最新推荐文章于 2023-09-11 17:21:33 发布

qq_39913441

最新推荐文章于 2023-09-11 17:21:33 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39913441/article/details/97276559

本文详细对比了jQuery中的$(document).ready与JavaScript中的window.onload事件的区别。前者在DOM文档加载完成即可触发，无需等待图片等资源加载，且可多次调用；后者则需等待页面所有元素加载完毕才触发，且只能执行一次。

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

$(document).ready 与 window.onload 的区别

$(document).ready 的作用是等页面的==文档(document)==中的节点加载完毕后，再执行后续的代码，因为我们再执行代码的时候，可能会依赖页面的某个元素，我们要确保这个元素真正的被加载完毕后才能正确使用。

它与window.onload的区别在于**前者(.ready)在文档节点加载完毕后就可以执行，不必等页面中图片或其他外部文件等加载完毕，并且可以写多个.ready，而后者(.onload)**是页面所有元素都要加载完毕，且只能执行一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			/* JQ的$(document).ready(function(){}) 可以执行多次,
			而JS的window.onload 只能执行一次 */
			$(document).ready(function(){
				$("#p1").html("hello world!")
			})
			//以上也可以简写为:
			$(function(){
				$("#p2").html("hello world!")
			})
			
			//JS与JQ处理对象的区别
			// 通过标准的javascript处理
			$(function(){
				var p3 = document.getElementById("p3")
				p3.innerHTML = "JS happy new year p3!"
				p3.style.color = "red"
			})
			//通过JQ处理
			$(function(){
				var $p4 = $("#p4")
				$p4.html("JQ happy new year p4!")
				$p4.css('color','red')
			})
			
		</script>
	</head>
	<body>
		<div >
			<p id="p1"></p>
			<p id="p2"></p>
			<p id="p3"></p>
			<p id="p4"></p>
		</div>
	</body>
</html>

在这里插入图片描述