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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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采集神器cURL使用方法详解
2016/02/19 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
php 中的closure用法详解
2017/06/12 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
js实现选项卡效果
2020/03/07 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python timeit模块的使用实践
2020/01/13 Python
Django如何实现防止XSS攻击
2020/10/13 Python
python中str内置函数用法总结
2020/12/27 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
自我鉴定范文200字
2013/10/02 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
认错检讨书
2014/10/02 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
债务纠纷起诉书
2015/05/20 职场文书
2015年党小组工作总结
2015/05/26 职场文书
Python代码实现双链表
2022/05/25 Python