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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
js 编写规范
Mar 03 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
vue时间格式化实例代码
Jun 13 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
用PHP生成html分页列表的代码
2007/03/18 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python调用java的jar包方法
2018/12/15 Python
Python netmiko模块的使用
2020/02/14 Python
Python新手学习装饰器
2020/06/04 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
回门宴答谢词
2014/01/13 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
中学教师培训制度
2014/01/31 职场文书
简历中的自我评价范文
2014/02/05 职场文书
年级组长自我鉴定
2014/02/22 职场文书
租房协议书
2014/04/10 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
维稳承诺书
2015/01/20 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python