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 学习笔记 选择器之六
Jul 23 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue实现拖拽交换位置
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
discuz7 phpMysql操作类
2009/06/21 PHP
php自动加载的两种实现方法
2010/06/21 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
浅析python标准库中的glob
2020/03/13 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
python中str内置函数用法总结
2020/12/27 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
寒假实习自荐信
2014/01/26 职场文书
全国文明单位申报材料
2014/05/31 职场文书
员工自我评价范文
2015/03/11 职场文书
龙猫观后感
2015/06/09 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫