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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
js+canvas实现画板功能
Sep 13 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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部分常见问题总结
2006/10/09 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Vue基础配置讲解
2019/11/29 Javascript
JavaScript如何操作css
2020/10/24 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python logging模块用法示例
2018/08/28 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
python实现银行账户系统
2021/02/22 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
求职推荐信范文
2013/12/01 职场文书
跟单文员岗位职责
2014/01/03 职场文书
护理职业生涯规划书
2014/01/24 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2014财务年终工作总结
2014/12/08 职场文书
学生个人总结范文
2015/02/15 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏