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 相关文章推荐
js图片处理示例代码
May 12 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
用node.js写一个jenkins发版脚本
May 21 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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下的权限算法的实现
2007/04/28 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php实现的http请求封装示例
2016/11/08 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
Python线程的两种编程方式
2015/04/14 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python发送邮件功能实现代码
2016/07/15 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
热能动力工程毕业生自荐信
2013/11/07 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
中学生检讨书1000字
2014/10/28 职场文书
慈善募捐倡议书
2015/04/27 职场文书
2015年暑假生活总结
2015/07/13 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python