原文：http://liminhappygirl.iteye.com/blog/1841360

javaScript放在<head>和<body>的区别：

在HTML body部分中的JavaScript会在页面加载的时候被执行。 
在HTML head部分中的JavaScript会在被调用的时候才执行。

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 
body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

由于在页面中总是难免javascript脚本语言，在代码中看到body里可以放<script type=”text/javascript”>脚本，而head里也可用<scripttype=”text/javascript”>脚本，想要用好他们，就得了解他们的区别，经过自己的总结发现他们的区别如下： 
一、在head主体里写，如果有方法体，那么就是在客户点击的时候触发，如果没写方法体，比如引入的js文件，那么在加载页面前就预加载了。 
二、写在body主体里，是为了实现某些部分动态地创建文档。 这里比如制作鼠标跟随事件，肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果等。这个是在页面加载的时候加载。 
二、会与body和head标签顺序有关。比如下面代码： 
<html> 
<body> 
<script type="text/javascript"> 
alert("in body"); 
</script> 
</body> 
<head> 
<script type="text/javascript"> 
alert("in head"); 
</script> 
</head> 
</html>

结果是先弹出body，再弹出head. 
如果改下代码结果就截然相反了，例 
<html> 
<head> 
<script type="text/javascript"> 
alert("in head"); 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
alert("in body"); 
</script> 
</body> 
</html> 
执行时得考虑javascript执行顺序

说明：

1、页面加载的时候是从上往下执行的，即先执行<head>再执行<body>。

2、一般这样写：<script type="text/javascript">；如果这样写：<script language="javascript">是不标准的，IE能认，但是别的就不知道了。

3、<script type="text/javascript">一般情况下都放在<head></head>里面，便于管理。 
这样也能保证在显示页面之前，所有的javascript代码已经经过解析了。 
放在head里<script>始终是被执行的。 
一般来说，脚本最好放在<head>标签中，但是有时候脚本初始化要用到<body>当中的节点，由于当<head>加载时<body>是未被加载的，所以引致脚本运行出错，以下为错误代码： 
<html> 
<head> 
  <script type="text/javascript"> 
     alert("body's id = "+document.body.id); 
</script> 
</head> 
<body id="test"> 
</body> 
</html>

错误：alert消息框未被弹出 
方法1:在<script>标签处要加一个defer参数，使<script>中的代码延时执行，在页面加载完成后才被执行 
     <html> 
     <head> 
   <script defer type="text/javascript"> 
      alert("body's id = "+document.body.id); 
   </script> 
     </head> 
     <body id="test"> 
     </body> 
     </html> 
方法2:而另一种做法就是将<script>放到<body>后面 
     <html> 
     <head> 
     </head> 
     <body id="test"> 
     </body> 
     <script type="text/javascript"> 
alert("body's id = "+document.body.id); 
     </script> 
     </html>

这样其实是同样道理，就是在加载完<body>后再加载<script>的内容 
方法3:当然也可以用window.onload来延时执行，这里暂时不作介绍

[转]JavaScript放在<head>和<body>的区别的更多相关文章

  1. javaScript放在head和body的区别

    JavaScript写在哪里? 内部:Html网页的<body></body>中: 内部:Html网页的<head></head>中: 外部:外部js文 ...

  2. javascript 代码放在head和body的区别

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...

  3. JavaScript问题01 js代码放在header和body的区别

    1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...

  4. JavaScript中:表达式和语句的区别

    JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...

  5. 浅谈Java和JavaScript中变量和数据类型的区别

    对于一门编程语言的学习,如果第一步是安装环境,那么第二步一定是学习这门语言的基本规则,变量和数据类型则首当其冲 JavaScipt作为一个蹭Java热度而命名的语言,在很多方面和Java也有一定的相似 ...

  6. 谈谈javascript放在哪里更合适

    关于javascript放在哪里更合适 脚本位置:  例如以下代码: <html> <head> <title>Script Example</title&g ...

  7. JavaScript返回上一页代码区别

    JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:win ...

  8. JavaScript代码放在head和body的区别(QRCode生成)

    1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始. 2.在body中时,直接加载并执行 典型的区别: 如果有不在函数中的执行语句,比如变量初始化,如果在hea ...

  9. javascript的window.ActiveXObject对象，区别浏览器的方法

    (window.ActiveXObject)的作用,用来判断浏览器是否支持ActiveX控件,如果支持ActiveX控件,我们可以利用var xml=new ActiveXObject("M ...

随机推荐

  1. iOS:shareSDK第三方登录

    shareSDK第三方登录跟分享差不多,比较简单,前面已有介绍.这里简单写一下第三方登录吧. 1.首先:我用到了QQ.微信.新浪这三个平台的登录,需要到它们各自的开发者平台注册开发者账号,这是我的QQ ...

  2. RecyclerView.ItemDecoration 间隔线

    内容已更新到:https://www.cnblogs.com/baiqiantao/p/19762fb101659e8f4c1cea53e7acb446.html 目录一个通用分割线ItemDecor ...

  3. js外部样式和style属性的添加移除

    在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...

  4. luigi操作hive表

    关于luigi框架下查询hive表的操作 class JoinQuery(HiveQueryTask): date=luigi.DateParameter() def hiveconfs(self): ...

  5. Oracle spatial 空间修正函数（SDO_UTIL.RECTIFY_GEOMETRY）

    Oracle spatial有个空间修正函数SDO_UTIL.RECTIFY_GEOMETRY,它可以修复以下可能:a.重复节点 b.自相交 c.坐标串朝向不正确. 该函数的构造函数格式: SDO_U ...

  6. Dreamweaver界面主要菜单功能介绍

    启动界面有四个功能:主要使用新建HTML,其中HTML有很多版本,由于国内IE6.0占据了将近百分之七十的比例,所以最新的HTML1.1对他支持的不好,我们主要使用XHTML 1.0 Transiti ...

  7. Spring Boot学习记录(二)–thymeleaf模板

    自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好 ...

  8. GameCenter 使用指南

    原地址:http://www.cocoachina.com/gamedev/misc/2010/1022/2229.html GameCenter 为单机游戏为主的 iPhone 游戏平台引入了社会化 ...

  9. Mysql导入大SQL文件数据问题

    如果sql文件过大,会出现mysql out of memory  (Needed XXX bytes) ,或者 "MySQL server has gone away"问题; 另 ...

  10. 让你的jenkins能当奴隶主---说说几种Jenkins build框架

    近期又有几个朋友看了俺的文章询问.怎样让Jenkins能做到分布式.我解释了非常久,发现这也是个非常好的topic,就来博客继续念叨念叨. 这个非常easy,所以这篇文章也就介绍简单点. 首先说下Je ...