JS代碼放在head和body中的區(qū)別分析

更新時間：2011年12月01日 00:02:08 作者：

放在head中的JS代碼會在頁面加載完成之前就讀取，而放在body中的JS代碼，會在整個頁面加載完成之后讀取

那么有什么不同呢？先看一個例子：
一個二級級聯(lián)動態(tài)下拉列表框，一級分類（即大類別）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> 

現(xiàn)在有個js腳本：

復制代碼代碼如下:

 
<script LANGUAGE= "JavaScript" > 
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一個一級分類的二級分類，去掉后第一個一級分類的二級分類在頁面載入之后不顯示?；剡x才顯示。將一級分類的value傳給changelocation()函數(shù),生成二級分類的列表 
</script> 

那么把這個js腳本放head里面還是body里面呢？
答案是不僅要放到body里面，而且還得放到定義id='vSort0'的列表框后面，因為這個js腳本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，頁面加載后順序執(zhí)行代碼，執(zhí)行到這個js發(fā)現(xiàn)vSort0未定義（即undefind），這個js也就失去了作用。
而為什么我們經(jīng)常看到有很多的人把js腳本放到head里面沒事呢？對！
就是因為你看到的在head里的js代碼有onclick等事件傳遞了變量給函數(shù)。
這就告訴我們，如果我們想定義一個全局對象，而這個對象與頁面中的某個按鈕（等等）有關(guān)時，我們必須將其放入body中，道理很明顯：如果放入head，那當頁面加載head部分的時候，那個按鈕（等等）都還沒有被定義（也可以說是還沒有被加載，因為加載的過程就是執(zhí)行代碼的過程，包括了定義），你能得到的只可能是一個undefind。

您可能感興趣的文章:

head
body

相關(guān)文章

D3.js封裝文本實現(xiàn)自動換行和旋轉(zhuǎn)平移等功能
之前小編和大家分享了SVG中如何配合使用text和tspan來實現(xiàn)換行的功能，所以這篇文章對此功能進行一下封裝，以后就可以直接用了。有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10
js簡單實現(xiàn)HTML標簽Select聯(lián)動帶跳轉(zhuǎn)
Select聯(lián)動帶跳轉(zhuǎn)的效果想必大家并不陌生吧，下面有個不錯的示例，感興趣的朋友可以參考下
2013-10-10
javascript文本模板用法實例
這篇文章主要介紹了javascript文本模板用法,實例分析了文本模板的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
JavaScript定義類和對象的方法
這篇文章主要介紹了JavaScript定義類和對象的方法,分別以函數(shù)方式與Object類方式實現(xiàn),是javascript非常重要的技巧,需要的朋友可以參考下
2014-11-11
JavaScript仿靜態(tài)分頁實現(xiàn)方法
這篇文章主要介紹了JavaScript仿靜態(tài)分頁實現(xiàn)方法,可實現(xiàn)模擬靜態(tài)效果的分頁功能,并且可以控制分頁的字符數(shù),使用時可根據(jù)情況進行相應(yīng)的字段修改即可,非常靈活實用,需要的朋友可以參考下
2015-08-08
js,jQuery 排序的實現(xiàn)代碼,網(wǎng)頁標簽排序的實現(xiàn),標簽排序
js,jQuery 排序的實現(xiàn),網(wǎng)頁標簽排序的實現(xiàn),標簽排序，需要的朋友可以參考下。
2011-04-04
微信小程序調(diào)用騰訊地圖API文檔JavaScript?SDK和WebService?API詳細解讀
本文介紹了如何使用騰訊位置服務(wù),包括申請開發(fā)者密鑰、獲取小程序APPID、下載地圖SDK、設(shè)置服務(wù)器域名白名單等步驟,詳細說明了如何在微信小程序中集成騰訊位置服務(wù),進行地圖展示和周邊搜索等功能的實現(xiàn),同時提醒注意API的調(diào)用次數(shù)和權(quán)限限制,需要的朋友可以參考下
2024-09-09
JavaScript進階教程之非extends的組合繼承詳解
組合繼承有時候也叫偽經(jīng)典繼承,指的是將原型鏈和借用構(gòu)造函數(shù)技術(shù)組合到一塊,從而發(fā)揮二者之長的一種繼承模式,下面這篇文章主要給大家介紹了關(guān)于JavaScript進階教程之非extends的組合繼承的相關(guān)資料,需要的朋友可以參考下
2022-08-08
詳解小程序input框失焦事件在提交事件前的處理
這篇文章主要介紹了詳解小程序input框失焦事件在提交事件前的處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
JS如何使用正則表達式(match)截取括號中的文字和數(shù)字
正則表達式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關(guān)于JS如何使用正則表達式(match)截取括號中文字和數(shù)字的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-10-10