1.在head中时，所代表的functions只加载而不执行，执行是在某一事件触发后才开始。
2.在body中时，直接加载并执行
典型的区别：
如果有不在函数中的执行语句，比如变量初始化，如果在head中就不会执行。
举个栗子：
这段代码会生成一个二维码，二维码的跳转地址为text中超链接
a.js放在body中，可生成二维码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>
<script>
$(‘#qrcode‘).qrcode({
width: 128,
height: 128,
text: "http://www.bsnc.cn"
})
</script>
</body>
</html>
b.js放在head中，网页为空白，没有执行js中内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>
$(‘#qrcode‘).qrcode({
width: 128,
height: 128,
text: "http://www.bsnc.cn"
})
</script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>
c.js放在head中，用window.onload函数执行js文件，这样仍然会生成二维码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>
window.onload = function() {
$(‘#qrcode‘).qrcode({
width: 128,
height: 128,
text: "https://www.cnblogs.com/GG-Bond/"
})
}
</script>
</head>
<body>
<div id="qrcode"></div>
</body>
</html>
总结：body中js代码直接执行，head中代码需要触发条件
原文地址：https://www.cnblogs.com/GG-Bond/p/9634261.html
时间： 2024-10-13 13:58:59