最近一直在忙工作，没有时间来写博客了，不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同。起初我没在意这个问题，后来一直解决不了，通过上网与查资料问同事，终于我明白了，原来我碰到了这么个问题。

用简单的一句话介绍就是加载顺序的问题。如果放入head，那当页面加载head部分的时候，那个控件都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。 如果放入控件后面，则达到了所想的结果（控件加载完了，JS脚本也进行加载得到了想得到的值）

其实如果是JS中的方法就无所谓放在那里，如果是全局对象js脚本就必须放在body里面。如果是一个方法W3C就建议房子Head里面。

下面我就用例子慢慢介绍一下吧。（大神勿喷）

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">

    alert("加载页面之前进行弹出");

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="btnAlter" type="button" value="button" />

    </div>

        <script type="text/javascript">

    alert("加载页面之后进行弹出");

    </script>

    </form>

</body>

</html>

JS代码放在head和body中的区别分析的更多相关文章

  1. vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...

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

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

  3. JS代码放在哪里比较好！

    在页面上加上<script></script>只有2个地方:head中,body体中 如果外部的JS文件,在head中加,写页面特效js放在body后面. <html&g ...

  4. JavaScript之将JS代码放在什么位置最合适

    1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  5. JS代码，从一个数组中得到连号的数并显示

    JavaScript code function m() { var k = [1, 2, 7, 8, 9, 11, 22, 35, 36]; ) return; ; ; ; ; i < k.l ...

  6. js script放在head和body里面的区别

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66       java script放在head和body的区别   ...

  7. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  8. jquery的js代码兼容全部浏览器的解决方法

    //以下均可console.log()实验   var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网 ...

  9. 关于js代码位置的第一次总结

    最近在学习dom树节点操作时,发现查找结点总是返回null,原因在于将js代码放在了head里,因为页面是从上往下逐行加载,在还未加载相关节点时当然查找不到,返回值为null. 而对于另一句老生常谈的 ...

随机推荐

  1. 背包问题 (DP)

    利用记忆化数组.记dp[i][j]为根据rec的定义,从第i个物品开始挑选总重小于j时,总价值的最大值. 递推式: dp[i][j]=0     (j<w[i]) dp[i][j] dp[i][ ...

  2. HTML DOM的nodeName,nodeValue,nodeType介绍

    将HTML DOM中几个常用的属性做下介绍,工作中作为参考. nodeName 属性可依据节点的类型返回其名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文 ...

  3. linux_inux中find批量删除空文件及空文件夹脚本

    1.{}和之间有一个空格 2.find . -name 之间也有空格 3.exec 是一个后续的命令,{}内的内容代表前面查找出来的文件 linux下批量删除空文件(大小等于0的文件)的方法 rm - ...

  4. UML九种图汇总

    UML视频读,该文件开始起草.我不知道如何下手啊!我想先UML九图和总结的关系,然后开始用它的文件. 首先在地图上. UML的九种图各自是:用例图.类图.对象图.状态图.活动图.协作图.序列图.组件图 ...

  5. 从头开始学JavaScript (九)——执行环境和作用域

    原文:从头开始学JavaScript (九)--执行环境和作用域 一.执行环境:定义了变量或者函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有与之关联的变量对象. 变量对象:保存着环境中 ...

  6. UML之轻松入门(2)-掌握Junit，让我们的开发更高效

         使用UML不仅能够形象化的表达我们的程序思想,并且能够帮助我们提高程序的质量.一个杂乱无章的程序让维护者望而生畏,其成本也可想而知.在面向程序设计(OOD)中有5条原则是帮助我们设计一个高效 ...

  7. STL之sort函数的用法

    说明:本文仅供学习交流,转载请标明出处,欢迎转载! STL封装了一个排序算法,该算法相应的头文件为#include<algorithm>,我们能够依据须要对一个数组进行排序或者降序. so ...

  8. Socket 学习（三）.5 UDP 的弱点

    前面 讲到了,udp 传输文本的例子,发现 udp 确实 比tcp 高效一些,现在我用来传输文件,问题果然来了,结果发现 他不能一次 传输大于 64K的东西! 那么 我自然想到了 切包,多次发送,再合 ...

  9. Roundabout for jQuery

    效果图: Roundabout是一个转换静态HTML元素结构为交互式播放区域的jQuery插件(而且并不仅仅是一个转盘,还有许多的形状) 首先你要下载好Jquery.min.js,和Jquery-Ro ...

  10. 在SQL Server中对视图进行增删改

    原文:在SQL Server中对视图进行增删改 Lesktop开源IM发布以后,有一些网友问及如何在嵌入IM后与自己网站的用户系统整合(即如何让嵌入的IM直接使用网站原有的用户数据库,而不需要将已有的 ...