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异步验证用户名是否存在示例代码
May 21 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
幼儿园义卖活动方案
2014/01/17 职场文书
音乐专业自荐信
2014/02/07 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
525心理活动总结
2014/07/04 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
python实现自动化群控的步骤
2021/04/11 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
MYSQL常用函数介绍
2022/05/05 MySQL