放在head中的JS代碼會在頁面加載完成之前就讀取，而放在body中的JS代碼，會在整個頁面加載完成之後讀取。
js文件放在<body></body>之間
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!-- add by hongk end -->
<html>
<head>
<title>更改密碼</title>
<LINK href="${ctx }/static/css/default/common.css" type="text/css" rel="stylesheet">
<script src="${ctx }/static/js/common/common-ie.js" type="text/javascript"></script>
<script src="${ctx }/static/js/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<table class="deftoptable" border="0" width="90%" id="PAGETABLE" cellspacing="0" cellpadding="0" >
<tr>
<td class="leftsidetd" width="15"> </td>
<td class="headercol" width="750"> <img border="0" src="${ctx }/static/images/head-sot2.gif" width="43" height="42" >更改密碼</td>
<td class="rightsidetd" width="15"> </td>
</tr>
<tr >
<td class="leftsidetd" width="15"> </td>
<td width="95%" class="bodycol" align=center >
<br>
<table class="sestab" id="appChangePassword" cellspacing="0" cellpadding="0" style="width: 80%">
<thead>
<tr>
<th class="sheadleft"> </th>
<th class="sheadmain">更改密碼</th>
<th class="sheadright"> </th>
</tr>
</thead>
<tbody class="sbodymain">
<tr>
<td colspan="3" class="sbodytd"><br />
<table width="700" border=0 class="guitable">
<tr>
<td align="center">
<form action="" id="updatePassForm" class="updatePass_form">
<p>輸入舊密碼：<input type="password" name="oldPass"></p>
<p>輸入新密碼：<input type="password" name="newPass"></p>
<p>確認新密碼：<input type="password" name="affirmPass"></p>
<input type="hidden" name="submitType" value="update">
<input type="button" id="updatePass" value="提交">
<input type="reset" name="resetPass" value="重置">
<input type="button" id="returns" value="返回">
</form>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td class="rightsidetd"> </td>
</tr>
</table>
<script type="text/javascript" src="${ctx }/static/js/usrAndPower/resetAndUpdPass.js"></script>
</body>
</html>js文件放在<head></head>之間
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!-- add by hongk end -->
<html>
<head>
<title>更改密碼</title>
<LINK href="${ctx }/static/css/default/common.css" type="text/css" rel="stylesheet">
<script src="${ctx }/static/js/common/common-ie.js" type="text/javascript"></script>
<script src="${ctx }/static/js/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx }/static/js/usrAndPower/resetAndUpdPass.js"></script>
</head>
<body>
<table class="deftoptable" border="0" width="90%" id="PAGETABLE" cellspacing="0" cellpadding="0" >
<tr>
<td class="leftsidetd" width="15"> </td>
<td class="headercol" width="750"> <img border="0" src="${ctx }/static/images/head-sot2.gif" width="43" height="42" >更改密碼</td>
<td class="rightsidetd" width="15"> </td>
</tr>
<tr >
<td class="leftsidetd" width="15"> </td>
<td width="95%" class="bodycol" align=center >
<br>
<table class="sestab" id="appChangePassword" cellspacing="0" cellpadding="0" style="width: 80%">
<thead>
<tr>
<th class="sheadleft"> </th>
<th class="sheadmain">更改密碼</th>
<th class="sheadright"> </th>
</tr>
</thead>
<tbody class="sbodymain">
<tr>
<td colspan="3" class="sbodytd"><br />
<table width="700" border=0 class="guitable">
<tr>
<td align="center">
<form action="" id="updatePassForm" class="updatePass_form">
<p>輸入舊密碼：<input type="password" name="oldPass"></p>
<p>輸入新密碼：<input type="password" name="newPass"></p>
<p>確認新密碼：<input type="password" name="affirmPass"></p>
<input type="hidden" name="submitType" value="update">
<input type="button" id="updatePass" value="提交">
<input type="reset" name="resetPass" value="重置">
<input type="button" id="returns" value="返回">
</form>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td class="rightsidetd"> </td>
</tr>
</table>
</body>
</html>
<!-- add by hongk end -->
//重置密碼
$("#resetPass").click(function(){
var userName=$("#resetPassForm input[name='userName']").val();
var newPass=$("#resetPassForm input[name='newPass']").val();
var affirmPass=$("#resetPassForm input[name='affirmPass']").val();
if($.trim(userName)==""||$.trim(newPass)==""||$.trim(affirmPass)==""){
alert("請選填完整信息！");
return false;
}
$.ajax({
type:"post",
cache:false,
dataType:"json",
async:false,
url:"usrDefine/resetPassOrUpdatePass.do",
data:$("#resetPassForm").serialize(),
success:function(json){
if(json.success){
alert(json.data);
}else{
alert(json.error);
}
}
});
});
//修改密碼
$("#updatePass").click(function(){
var oldPass=$("#updatePassForm input[name='oldPass']").val();
var newPass=$("#updatePassForm input[name='newPass']").val();
var affirmPass=$("#updatePassForm input[name='affirmPass']").val();
if($.trim(oldPass)==""||$.trim(newPass)==""||$.trim(affirmPass)==""){
alert("請選填完整信息！");
return false;
}
$.ajax({
type:"post",
cache:false,
async:false,
dataType:"json",
url:"usrDefine/resetPassOrUpdatePass.do",
data:$("#updatePassForm").serialize(),
success:function(json){
if(json.success){
alert(json.data);
}else{
alert(json.error);
}
}
});
});
//重置頁面和修改頁面的返回
$("#returns").click(function(){
window.history.back(-1); //update by hongk
});
答案是不僅要放到body裏面，而且還得放到定義 id='returns' 的列表框後面，因爲這個js腳本中有 $("#returns").click(function()，如果放到head裏或者body的 id='returns' 前，頁面加載後順序執行代碼，執行到這個js發現 returns 未定義（即undefind），這個js也就失去了作用。
而爲什麼我們經常看到有很多的人把js腳本放到head裏面沒事呢？對！
就是因爲你看到的在head裏的js代碼有onclick等事件傳遞了變量給函數。
這就告訴我們，如果我們想定義一個全局對象，而這個對象與頁面中的某個按鈕（等等）有關時， 我們必須將其放入body中，道理很明顯：如果放入head，那當頁面加載head部分的時候，那個按鈕（等等）都還沒有被定義（也可以說是還沒有被加 載，因爲加載的過程就是執行代碼的過程，包括了定義），你能得到的只可能是一個undefind。
