JS代码放在head和body中的区别分析

那么有什么不同呢？先看一个例子：
一个二级级联动态下拉列表框，一级分类（即大类别）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。

赞 (0)

相关推荐

  • Javascript中使用A标签获取当前目录的绝对路径方法

    一谈到路径相关的问题,大家都会往window.location上想,确实这个对象提供了相当多的路径信息,其中常用的就包括: 1.location.href:当前页面的完整URL 2.location.pathname:当前URL中的路径名 3.location.hash:当前URL中的锚点 4.location.search:当前URL中的查询参数 然而,location没有一个属性能直接获得当前目录(不含文件名)的绝对路径.通过Google我发现了一些错误的方法,比如说把URL通过"/&quo

  • JavaScript设置body高度为浏览器高度的方法

    本文实例讲述了JavaScript设置body高度为浏览器高度的方法.分享给大家供大家参考.具体实现方法如下: div节点高度要实现百分比,其父节点必须要有确定的高度.所以在body节点下的子节点若想要用百分比来确定高度时,就必须给body给定一个高度. 复制代码 代码如下: <script>          setTimeout(function(){              document.getElementsByTagName('body')[0].style.height =

  • javascript和jquery修改a标签的href属性

    javascript: 复制代码 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 复制代码 代码如下: $("#myId").attr("href"

  • JavaScript中window、doucment、body的解释

    Window 对象表示浏览器中打开的窗口. 即一个浏览器窗口只有一个window对象. Document对象是载入浏览器的 HTML 文档 即window载入document. Body 对象代表HTML文档的主体(HTML body).

  • JavaScript实现获取用户单击body中所有A标签内容的方法

    本文实例讲述了JavaScript实现获取用户单击body中所有A标签内容的方法.分享给大家供大家参考,具体如下: var tbody = document.body; tbody.onclick = function (e) { getUrl(e); } function getUrl(e) { e = e || event; var target = e.target || e.srcElement, href; alert(target.tagName); //获取到A标签中的onclic

  • 基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑

    当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • 使用JS或jQuery模拟鼠标点击a标签事件代码

    复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &

  • 在JS中a标签加入单击事件屏蔽href跳转页面

    我们常用的在a标签中有点击事件: 1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行javascript语句 2. a href="javascript:void(0);"

  • js确认删除对话框适用于a标签及submit

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • JS 实现点击a标签的时候让其背景更换

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type=text/javascript src="alabel.js"></script> <style type=&q

随机推荐