JS代碼放在head和body中的區(qū)別分析
更新時(shí)間：2011年12月01日 00:02:08 作者：
放在head中的JS代碼會(huì)在頁面加載完成之前就讀取，而放在body中的JS代碼，會(huì)在整個(gè)頁面加載完成之后讀取
那么有什么不同呢？先看一個(gè)例子：
一個(gè)二級級聯(lián)動(dòng)態(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)在有個(gè)js腳本：
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一個(gè)一級分類的二級分類，去掉后第一個(gè)一級分類的二級分類在頁面載入之后不顯示。回選才顯示。將一級分類的value傳給changelocation()函數(shù),生成二級分類的列表
</script>
那么把這個(gè)js腳本放head里面還是body里面呢？
答案是不僅要放到body里面，而且還得放到定義id='vSort0'的列表框后面，因?yàn)檫@個(gè)js腳本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，頁面加載后順序執(zhí)行代碼，執(zhí)行到這個(gè)js發(fā)現(xiàn)vSort0未定義（即undefind），這個(gè)js也就失去了作用。
而為什么我們經(jīng)?？吹接泻芏嗟娜税裫s腳本放到head里面沒事呢？對！
就是因?yàn)槟憧吹降脑趆ead里的js代碼有onclick等事件傳遞了變量給函數(shù)。
這就告訴我們，如果我們想定義一個(gè)全局對象，而這個(gè)對象與頁面中的某個(gè)按鈕（等等）有關(guān)時(shí)， 我們必須將其放入body中，道理很明顯：如果放入head，那當(dāng)頁面加載head部分的時(shí)候，那個(gè)按鈕（等等）都還沒有被定義（也可以說是還沒有被加 載，因?yàn)榧虞d的過程就是執(zhí)行代碼的過程，包括了定義），你能得到的只可能是一個(gè)undefind。
一個(gè)二級級聯(lián)動(dòng)態(tài)下拉列表框，一級分類（即大類別）id="vSort0".
復(fù)制代碼 代碼如下:
<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)在有個(gè)js腳本：
復(fù)制代碼 代碼如下:
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一個(gè)一級分類的二級分類，去掉后第一個(gè)一級分類的二級分類在頁面載入之后不顯示。回選才顯示。將一級分類的value傳給changelocation()函數(shù),生成二級分類的列表
</script>
那么把這個(gè)js腳本放head里面還是body里面呢？
答案是不僅要放到body里面，而且還得放到定義id='vSort0'的列表框后面，因?yàn)檫@個(gè)js腳本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，頁面加載后順序執(zhí)行代碼，執(zhí)行到這個(gè)js發(fā)現(xiàn)vSort0未定義（即undefind），這個(gè)js也就失去了作用。
而為什么我們經(jīng)?？吹接泻芏嗟娜税裫s腳本放到head里面沒事呢？對！
就是因?yàn)槟憧吹降脑趆ead里的js代碼有onclick等事件傳遞了變量給函數(shù)。
這就告訴我們，如果我們想定義一個(gè)全局對象，而這個(gè)對象與頁面中的某個(gè)按鈕（等等）有關(guān)時(shí)， 我們必須將其放入body中，道理很明顯：如果放入head，那當(dāng)頁面加載head部分的時(shí)候，那個(gè)按鈕（等等）都還沒有被定義（也可以說是還沒有被加 載，因?yàn)榧虞d的過程就是執(zhí)行代碼的過程，包括了定義），你能得到的只可能是一個(gè)undefind。
您可能感興趣的文章:
- 基于JS實(shí)現(xiàn)彈出一個(gè)隱藏的div窗口body頁面變成灰色并且不可被編輯
- JavaScript設(shè)置body高度為瀏覽器高度的方法
- JavaScript中window、doucment、body的解釋
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- javascript和jquery修改a標(biāo)簽的href屬性
- js實(shí)現(xiàn)a標(biāo)簽超鏈接提交form表單的方法
- JS 實(shí)現(xiàn)點(diǎn)擊a標(biāo)簽的時(shí)候讓其背景更換
- js確認(rèn)刪除對話框適用于a標(biāo)簽及submit
- 在JS中a標(biāo)簽加入單擊事件屏蔽href跳轉(zhuǎn)頁面
- Javascript中使用A標(biāo)簽獲取當(dāng)前目錄的絕對路徑方法
- JavaScript實(shí)現(xiàn)獲取用戶單擊body中所有A標(biāo)簽內(nèi)容的方法
相關(guān)文章
D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行和旋轉(zhuǎn)平移等功能
之前小編和大家分享了SVG中如何配合使用text和tspan來實(shí)現(xiàn)換行的功能，所以這篇文章對此功能進(jìn)行一下封裝，以后就可以直接用了。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
js簡單實(shí)現(xiàn)HTML標(biāo)簽Select聯(lián)動(dòng)帶跳轉(zhuǎn)
Select聯(lián)動(dòng)帶跳轉(zhuǎn)的效果想必大家并不陌生吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了javascript文本模板用法,實(shí)例分析了文本模板的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript定義類和對象的方法,分別以函數(shù)方式與Object類方式實(shí)現(xiàn),是javascript非常重要的技巧,需要的朋友可以參考下2014-11-11
JavaScript仿靜態(tài)分頁實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript仿靜態(tài)分頁實(shí)現(xiàn)方法,可實(shí)現(xiàn)模擬靜態(tài)效果的分頁功能,并且可以控制分頁的字符數(shù),使用時(shí)可根據(jù)情況進(jìn)行相應(yīng)的字段修改即可,非常靈活實(shí)用,需要的朋友可以參考下2015-08-08
js,jQuery 排序的實(shí)現(xiàn)代碼,網(wǎng)頁標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序
js,jQuery 排序的實(shí)現(xiàn),網(wǎng)頁標(biāo)簽排序的實(shí)現(xiàn),標(biāo)簽排序，需要的朋友可以參考下。2011-04-04
微信小程序調(diào)用騰訊地圖API文檔JavaScript?SDK和WebService?API詳細(xì)解讀
本文介紹了如何使用騰訊位置服務(wù),包括申請開發(fā)者密鑰、獲取小程序APPID、下載地圖SDK、設(shè)置服務(wù)器域名白名單等步驟,詳細(xì)說明了如何在微信小程序中集成騰訊位置服務(wù),進(jìn)行地圖展示和周邊搜索等功能的實(shí)現(xiàn),同時(shí)提醒注意API的調(diào)用次數(shù)和權(quán)限限制,需要的朋友可以參考下2024-09-09
JavaScript進(jìn)階教程之非extends的組合繼承詳解
組合繼承有時(shí)候也叫偽經(jīng)典繼承,指的是將原型鏈和借用構(gòu)造函數(shù)技術(shù)組合到一塊,從而發(fā)揮二者之長的一種繼承模式,下面這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之非extends的組合繼承的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了詳解小程序input框失焦事件在提交事件前的處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JS如何使用正則表達(dá)式(match)截取括號(hào)中的文字和數(shù)字
正則表達(dá)式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關(guān)于JS如何使用正則表達(dá)式(match)截取括號(hào)中文字和數(shù)字的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10