Html页面内容的执行顺序

最新推荐文章于 2022-08-02 18:09:59 发布

ljh_learn_from_base

最新推荐文章于 2022-08-02 18:09:59 发布

阅读量6.7k

点赞数 4

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/ljh_learn_from_base/article/details/78140309

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在没有调用$(function(){});或者是window.οnlοad=function(){}时

HTML文档时按照从上到下执行的，所以有时候你会发现当你放在

<head></head>标签里的时候，会得不到你想要的，解决方法是：

将脚本放在body标签结束之前，其实js 可以放在HTML 的任何地方

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery-1.8.3.js"></script>  
    <title>Html页面内容执行顺序</title>     
</head>  
  
<body>  
    <input type="hidden" id="hiddenUserId" value="101" />  
    <input type="hidden" id="hiddenContextPath" value="/web" />  
    <input type="hidden" id="hiddenUserName" value="小明" />  
      
    <script type="text/javascript">  
        var userId = $('#hiddenUserId').val();  
        var contextPath = $('#hiddenContextPath').val();  
        var userName = $('#hiddenUserName').val();  
		alert(userName);
    </script>  
</body>  
  
</html>

然而我们如果想不要放在body标签结束之前，要放在头部怎么办，其实也是可以做的

就是在上面那段js 使用 $(function(){});包起来，在HTML文档树结构

加载完毕(并不包括一些静态资源：比如图片等)才执行，在同一个页面，可以使用多个$(function(){})，因为$(function(){})是个闭包，

各个$(function(){})之间相互不影响

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery-1.8.3.js"></script>  
    <title>Html页面内容执行顺序</title>     
	<script type="text/javascript">  
	$(function(){
		var userId = $('#hiddenUserId').val();  
        	var contextPath = $('#hiddenContextPath').val();  
        	var userName = $('#hiddenUserName').val();  
		alert(userName);
	});
        
    </script>  
</head>  
  
<body>  
    <input type="hidden" id="hiddenUserId" value="101" />  
    <input type="hidden" id="hiddenContextPath" value="/web" />  
    <input type="hidden" id="hiddenUserName" value="小明" /> 
</body>  
  
</html>

$(function(){})与window.load=function(){}的区别

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery-1.8.3.js"></script>  
    <title>Html页面内容执行顺序</title>     
	<script type="text/javascript">  
	$(function () {
		alert("ready1111111111111执行");
	});

	$(function () {
		alert("ready222222222222222执行");
	});

	window.onload = function () {
		alert("onload11111111111111");
	};
	window.onload = function () {
		alert("onload2222222222222");
	}
        
    </script>  
</head>  
  
<body>  
    <input type="hidden" id="hiddenUserId" value="101" />  
    <input type="hidden" id="hiddenContextPath" value="/web" />  
    <input type="hidden" id="hiddenUserName" value="小明" /> 
</body>  
  
</html>

执行结果是：

ready1111111111111执行
ready222222222222222执行
onload2222222222222

说明：

如果注册多个window.onload事件，事件会被覆盖，而且前面事件都不会执行

而$(function(){})则互不影响

还有一点就是window.onload 是在整个页面加载完成后(包括一些静态资源)才会被执行

DOM文档加载步骤：
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload