javascript代码放置位置对程序的影响

在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响。由于 HTML 文档是由浏览器从上到下依次载入的,javascript的放置位置主要影响获取网页元素。如果你的代码中包含获取网页元素的代码例如document.getElementById(),那么你需要确保你的javascript代码要在你想要获取的元素的位置之后。如过在你想要获取的元素的位置之前调用这个些代码,由于网页还没加载,造成你无法获取那个元素,下面用例子说明:

例如:

<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title> <script >
document.getElementById("ceshi").onclick=function(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞";
}
</script>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" >测试</button> </body>
</html>

 这时候程序是错误的,因为javascript代码加载在前,所以document.getElementById("ceshi") 会出现错误。因为此时页面还没加载,找不到这个元素。

放在<body>中,但是在想要获取的元素之前,程序也是错误的

<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
</head>
<body>
<script >
document.getElementById("ceshi").onclick=function(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞"; }
</script>
<p id="text">提示</p>
<button id="ceshi" >测试</button> </body>
</html>

  放在<p>元素之后,程序正确

<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" >测试</button>
<script >
document.getElementById("ceshi").onclick=function(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞"; }
</script>
</body>
</html>

  但是如果用jQuery或者是通过定义函数的形式可以不用考虑javascript代码的放置位置。比如

html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
<script>
function abc(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞"; }
</script>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" onclick="abc()" >测试</button> </body>
</html>

  

<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){ $("#text").html("海阔凭鱼跃,天高任鸟飞"); });
});
</script>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" onclick="abc()" >测试</button> </body>
</html>

  

上一篇:Redis 数据结构之dict


下一篇:70个注意的Python小Notes