原生js页面加载事件和JQuery页面加载事件

最新推荐文章于 2024-09-11 11:06:34 发布

wyh奔跑

最新推荐文章于 2024-09-11 11:06:34 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_42147250/article/details/106070109

版权

原生js页面加载事件和JQuery页面加载事件：

执行顺序：

1、JQuery页面加载事件先执行
2、原生js页面加载事件后执行

原因：1、JQuery页面加载完成之后是浏览器的内核解析完页面的标签创建好Dom对象之后就会马上执行
2、$(function(){}全写$(document).ready(function(){}) 看字面意思等document准备好以后 ready()
3、原生js页面加载完成之后除了要等浏览器的内核解析完页面的标签创建好Dom对象，还要等标签显示时需要的内容的加载

执行次数：

1、原生js的页面加载事件，只会执行一次，如果写了多个，会执行最后一个
2、JQuery的页面加载事件，可以执行多次，并且按照写的函数的顺序执行

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//$(function(){}) 和  window.onload = function(){}的区别

	//3、window.onload & $(function(){})
	//window.onload只可以使用一次
	//$(function(){})可以使用多次
	
	//JQuery页面加载事件先执行
	//原生js页面加载事件后执行
	
	//JQuery页面加载完成之后是浏览器的内核解析完页面的标签创建好Dom对象之后就会马上执行
	//$(function(){}全写$(document).ready(function(){})
	//原生js页面加载完成之后除了要等浏览器的内核解析完页面的标签创建好Dom对象，还要等标签显示时需要的内容的加载
	
	//原生js的页面加载事件，只会执行一次，如果写了多个，会执行最后一个
	//JQuery的页面加载事件，可以执行多次，并且按照写的函数的顺序执行
	window.onload = function(){
		alert("原生js页面加载完成")
	}
	window.onload = function(){
		alert("原生js页面加载完成2")
	}
	window.onload = function(){
		alert("原生js页面加载完成3")
	}
	
	$(function(){
		alert("jquery页面加载完成1")
	})
	$(function(){
		alert("jquery页面加载完成2")
	})
	$(function(){
		alert("jquery页面加载完成3")
	})
</script>
</head>
<body>
	<button>我是按钮</button>
	
	<iframe src="http://www.baidu.com"></iframe>
	
</body>
</html>