最近一直在忙工作，没有时间来写博客了，不过今天做网站的时候碰到一个问题就是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. OCP读书笔记(27) - 题库(ExamG)

    601.You need to perform a block media recovery on the tools01.dbf data file in the SALES database by ...

  2. 測试之路2——对照XML文件1

    才来几天,老大又给了我一个新的任务.不像曾经的建100个任务project那么坑爹,却还是顿时让我感觉压力山大. 由于在这之前,我改了他写的例程,用于生成新的任务项目,事实上任务项目就是通过XML文件 ...

  3. C#关于HttpClient的应用（二）：极光推送IM集成

    public class JPushClient:BaseHttpClient { private String appKey; private String masterSecret; public ...

  4. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  5. C++中避免内存泄露常见的解决方式

    常见内存泄露及解决方式-选自ood启发录 new/delete, array new/arrray delete匹配 case 1: 在类的构造函数与析构函数中没有匹配地调用 new/delete! ...

  6. cocos2d-x 移植android竖，横屏设置

    AndroidManifest.xml于android:screenOrientation现场控制屏幕方向,默认为横屏 android:screenOrientation="landscap ...

  7. 合并多段zip文件并解压缩

    cat xxx.zip.*** >xxx.zip unzip xxx.zip

  8. Linux server关闭自己主动

    公司linux server发生错误.mysql server没有理由关闭,我找不到理由.Version: '5.6.13-enterprise-commercial-advanced' socket ...

  9. thrift实现js与C#通讯

    利用thrift实现js与C#通讯的实例代码 1.为什么要用thrift js C#? 1.1 首先,js 通过 thrift 访问C#,实际上是一种c/s模式.thrift是通信工具,js是客户端, ...

  10. phpStorm+XDebug+chrome 配置

    运行环境: phpStorm 10.0.1 PHP 5.6.24 VC11 x86 Thread Safe Xdebug 2.4.1(PHP 5.6 VC11 TS (32 bit) 1. PHP安装 ...