html加载规则

最新推荐文章于 2024-06-09 09:49:42 发布

yinxiaoxin001

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量499

点赞数

分类专栏：前端

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html文件加载规则

1、顺序加载
- 问题:js代码无法获取表单中的信息？
- 总结:$(function(){})与window.onload(){}的区别

1、顺序加载

问题:js代码无法获取表单中的信息？

<!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">  
        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>

原因，html在顺序加载时还没有无法获取html元素；
解决方法1 将js代码移动到前
解决方法2 采用$(function(){});

// An highlighted block
<!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>

解决方法3 采用window.onload(){};

// An highlighted block
<!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>

总结:$(function(){})与window.onload(){}的区别

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

2、而(function(){})则互不影响，在HTML文档树结构加载完毕(并不包括一些静态资源：比如图片等)才执行，在同一个页面，可以使用多个(function(){})，因为(function(){})是个闭包

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

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

yinxiaoxin001

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html加载规则

html文件加载规则1、顺序加载问题:js代码无法获取表单中的信息？总结:$(function(){})与window.onload(){}的区别1、顺序加载问题:js代码无法获取表单中的信息？&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Ty...
复制链接

扫一扫

专栏目录