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 相关文章推荐
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
通过修改referer下载文件的方法
May 11 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
js中this对象用法分析
Jan 05 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
js实现购物车商品数量加减
Sep 21 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启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
javascript基础知识
2016/06/07 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
用python解压分析jar包实例
2020/01/16 Python
python使用建议技巧分享(三)
2020/08/18 Python
python一些性能分析的技巧
2020/08/30 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
婚前协议书怎么写
2014/04/15 职场文书
健康教育评估方案
2014/05/25 职场文书
关于运动会的口号
2014/06/07 职场文书
集中采购方案
2014/06/10 职场文书
学生检讨书怎么写
2015/05/07 职场文书
护理培训心得体会
2016/01/22 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL