JS代码放在head和body中的区别分析


Posted in Javascript onDecember 01, 2011

那么有什么不同呢?先看一个例子:
一个二级级联动态下拉列表框,一级分类(即大类别)id="vSort0".

<head> 
function changelocation(id) 
{…………} 
</head> 
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select> 
……………… 
</body>

现在有个js脚本:
<script LANGUAGE= "JavaScript" > 
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类,去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表 
</script>

那么把这个js脚本放head里面还是body里面呢?
答案是不仅要放到body里面,而且还得放到定义id='vSort0'的列表框后面,因为这个js脚本中有document.form4.vSort0.selectedIndex,如果放到head里或者body的id='vSort0'前,页面加载后顺序执行代码,执行到这个js发现vSort0未定义(即undefind),这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢?对!
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们,如果我们想定义一个全局对象,而这个对象与页面中的某个按钮(等等)有关时, 我们必须将其放入body中,道理很明显:如果放入head,那当页面加载head部分的时候,那个按钮(等等)都还没有被定义(也可以说是还没有被加 载,因为加载的过程就是执行代码的过程,包括了定义),你能得到的只可能是一个undefind。
Javascript 相关文章推荐
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JS的数组迭代方法
Feb 05 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
Json解析的方法小结
Jun 22 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 #Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 #Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 #Javascript
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
Jquery 实现图片轮换
2015/01/28 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python解析树及树的遍历
2016/02/03 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
房屋买卖委托公证书
2014/04/08 职场文书
公司周年庆活动方案
2014/08/25 职场文书
课外活动实习计划
2015/01/19 职场文书
奖励通知
2015/04/22 职场文书
Django drf请求模块源码解析
2021/06/08 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
MySQL索引失效场景及解决方案
2022/07/23 MySQL