JS代码放在head和body中的区别分析
最近一直在忙工作，没有时间来写博客了，不过今天做网站的时候碰到一个问题就是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中的区别分析的更多相关文章
- vue.js引用出错-script代码块放在head和body中的区别
这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...
- JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
- JS代码放在哪里比较好！
在页面上加上<script></script>只有2个地方:head中,body体中 如果外部的JS文件,在head中加,写页面特效js放在body后面. <html&g ...
- JavaScript之将JS代码放在什么位置最合适
1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- JS代码，从一个数组中得到连号的数并显示
JavaScript code function m() { var k = [1, 2, 7, 8, 9, 11, 22, 35, 36]; ) return; ; ; ; ; i < k.l ...
- js script放在head和body里面的区别
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66 java script放在head和body的区别 ...
- iOS中UIWebView执行JS代码(UIWebView)
iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...
- jquery的js代码兼容全部浏览器的解决方法
//以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网 ...
- 关于js代码位置的第一次总结
最近在学习dom树节点操作时,发现查找结点总是返回null,原因在于将js代码放在了head里,因为页面是从上往下逐行加载,在还未加载相关节点时当然查找不到,返回值为null. 而对于另一句老生常谈的 ...
随机推荐
- Struts1和Struts2对照
最近学习Struts1和Struts2.好多人.提到非常多的信息. Struts2不从Struts1进化. Struts2的前身WebWork. 呢,看了一些资料,下边就来比較比較. 一.架构分析 S ...
- HTTPS背后的加密算法（转）
当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒内进行大量的通信.InfoQ的这篇文章对此有非常详细的描述.这些复杂的步骤的第一步,就是浏览器与服务器之间协商一 ...
- Linux_修改创建文件夹时默认权限（修改为能上传）
1:查看当前权限 umask 0022 意思就是权限为:777-022 =755 读 2:临时修改 umask 020 020 意思为:777-020=757 读写上传 3:永久修改 回到根目录 cd ...
- WPF 辅助开发工具
原文:WPF 辅助开发工具 以下介绍的工具均为免费版,有些是源代码开放,希望对大家有用. Kaxaml 轻量级XAML 编辑器,可以同时进行图像和XAML 代码的编辑.最终生成开发人员想要的XAML ...
- LogMaster4Net
使用LogMaster4Net实现应用程序日志的集中管理 日志在软件系统中的重要性我在此也不赘述了,几乎所有程序员每天都会更日志打交道. 那么你是否曾今为这样的一些事情而困扰过: - 远程登录到不同的 ...
- 使用Visual Studio创建映像向导（Image Sprite）——Web Essential
原版的:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请參阅http://baike.baidu.com/vi ...
- Swift语言指南(七)--语言基础之布尔值和类型别名
原文:Swift语言指南(七)--语言基础之布尔值和类型别名 布尔值 Swift有一个基本布尔类型,叫做布尔(bool),布尔值又称逻辑值(logical),因为它只能为真(true)或假(false ...
- CSS3+HTML5特效3 - 纵向无缝滚动
老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...
- Swift入门教程:基本语法(三)
打印输出 Swift提供了2个打印输出函数 println :输出内容后会自动换行 print :对比println,少了个自动换行的功能 示例 输出字符串 println("欢迎学习传智播 ...
- 欧几里德欧几里德原理和扩展的原则，(Euclidean Theory and Extended Euclidean Theory)学习笔记
题记:这是我第四次审查扩展欧几里德原理,由于不经常使用.当你想使用,可以不记得细节,经常检查信息,所以,简单地梳理这一原则和扩展欧几里德的原则,以博客存档以备查用. 一个.欧几里德原理 欧几里德原理( ...