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中change事件用法实例
Dec 26 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 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
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
pandas 选择某几列的方法
2018/07/03 Python
浅析python继承与多重继承
2018/09/13 Python
Django异步任务线程池实现原理
2019/12/17 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python通过socketserver处理多个链接
2020/03/18 Python
办理退休介绍信
2014/01/09 职场文书
运动会邀请函范文
2014/02/06 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
语文教育专业求职信
2014/06/28 职场文书
出差报告范文
2014/11/06 职场文书
普宁寺导游词
2015/02/04 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技