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

最新推荐文章于 2021-03-10 22:11:24 发布

weixin_34401479

最新推荐文章于 2021-03-10 22:11:24 发布

阅读量171

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jacky-jiao/p/5601993.html

版权

在编写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").οnclick=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").οnclick=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").οnclick=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" οnclick="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" οnclick="abc()" >测试</button>

</body>
</html>

转载于:https://www.cnblogs.com/jacky-jiao/p/5601993.html

weixin_34401479

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript代码放置位置对程序的影响

在编写html文档时，javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方，会对 JavaScript 代码的正常执行会有一定影响。由于 HTML 文档是由浏览器从上到下依次载入的，javascript的放置位置主要影响获取网页元素。如果你的代码中包含获取网页元素的代码例如document.getElementById()，那么你需要确保...
复制链接

扫一扫