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 06 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
解决Vue watch里调用方法的坑
Nov 07 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
vue前端工程的搭建
Mar 31 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
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
python类定义的讲解
2013/11/01 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python实现一组典型数据格式转换
2018/12/15 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
酒店公关部经理岗位职责
2013/11/24 职场文书
交通事故私了协议书
2014/04/16 职场文书
励志演讲稿范文
2014/04/29 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
销售员态度差检讨书
2014/10/26 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
观后感的写法
2015/06/19 职场文书
工作会议简报
2015/07/20 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang