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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
javascript控制台详解
Jun 25 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
轮播的简单实现方法
Jul 28 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 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&amp;java(三)
2006/10/09 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python中的itertools的使用详解
2020/01/13 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
什么是唯一索引
2015/07/05 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
英文版网络工程师求职信
2013/10/28 职场文书
大学生应聘推荐信范文
2013/11/19 职场文书
工程班组长岗位职责
2013/12/30 职场文书
综合实践教学反思
2014/01/31 职场文书
大学生就业自荐书
2014/06/16 职场文书
企业计划生育责任书
2015/05/09 职场文书
结婚司仪主持词
2015/06/29 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
Python+Appium新手教程
2021/04/17 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
python数字类型和占位符详情
2022/03/13 Python