您的位置：首页 > Web前端 > HTML

Html页面内容的执行顺序

2017-09-30 10:41 591 查看

在没有调用$(function(){});或者是window.onload=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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航