js放到head中失效的原因與解決方法
1.今天寫js碰到一個奇怪的問題，寫好的js放到body里面執(zhí)行，但是放到head中沒有任何效果，為什么導致這種原因呢？
看失效代碼：
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
.login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(".login").click(function(){
alert(1);
});
</script>
</head>
<body>
<input type="text" class="pass" />
<div id="enter" class="login"> 登錄</div>
</body>
</html>
2.解決辦法：把js代碼放到body中，或者利用 window.onload = function(){} 代碼包裹，文檔加載之后再執(zhí)行，以后不建議放到head中。
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
.login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
window.onload = function(){
$(".login").click(function(){
alert(1);
});
}
</script>
</head>
<body>
<input type="text" class="pass" />
<div id="enter" class="login"> 登錄</div>
</body>
</html>
3.原因：
因為文檔還沒加載，就讀了js，js就不起作用了想在head里用的話，用window.onload = function(){//這里包裹你的代碼}
js可以分為外部的和內(nèi)部的，外部的js一般放到head內(nèi)。內(nèi)部的js也叫本頁面的JS腳本，內(nèi)部的js一般放到body內(nèi)，這樣做的目的有很多：
1.不阻塞頁面的加載(事實上js會被緩存)。
2.可以直接在js里操作dom，這時候dom是準備好的，即保證js運行時dom是存在的。
3.建議的方式是放在頁面底部，監(jiān)聽window.onload 或 readystate 來觸發(fā)js。
4.延伸：
head內(nèi)的js會阻塞頁面的傳輸和頁面的渲染。head 內(nèi)的 JavaScript 需要執(zhí)行結束才開始渲染 body，所以盡量不要將 JS 文件放在 head 內(nèi)?？梢赃x擇在 document 完成時，或者特定區(qū)塊后引入和執(zhí)行 JavaScript。head 內(nèi)的 JavaScript 需要執(zhí)行結束才開始渲染 body，所以盡量不要將 JS 文件放在 head 內(nèi)?？梢赃x擇在 document 完成時，或者特定區(qū)塊后引入和執(zhí)行 JavaScript。
所以在head內(nèi)的js一般要先執(zhí)行完后，才開始渲染body頁面。為了避免head引入的js腳本阻塞流浪器中主解析引擎對dom的解析工作，對dom的渲染，一般原則是，樣式在前面，dom文檔，腳本在最后面。遵循先解析再渲染再執(zhí)行script這個順序。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
這篇文章主要介紹了JS實現(xiàn)Tab欄切換的兩種方式,一種是面向過程的寫法，一種是面向對象的寫法，本文給大家分享詳細案例代碼，需要的朋友可以參考下2022-08-08
使用bootstrapValidator插件進行動態(tài)添加表單元素并校驗
動態(tài)添加表單元素，并調(diào)用bootstrapValidator的方法為表單添加校驗規(guī)則，調(diào)用addField()方法實現(xiàn)功能。下面通過本文看下具體實現(xiàn)方法吧2016-09-09
這篇文章主要分享了一則JavaScript阻止事件冒泡示例,需要的朋友可以參考下2014-12-12
不用getURL和fsCommand方法個國外的通信方法，值得一看2008-12-12
這篇文章主要為大家詳細介紹了Bootstrap模態(tài)框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了如何使用Lottie制作動畫,包括創(chuàng)建動畫文件.json、實現(xiàn)效果、在Git倉庫中保存和共享、運行動畫以及在動畫天堂下載和顯示JSON動畫,文中通過代碼及圖文介紹的非常詳細,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了微信小程序 點擊控件后選中其它反選實例詳解的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS實現(xiàn)的Unicode編碼轉換操作,結合完整實例形式分析了javascript實現(xiàn)Unicode編碼轉換的具體操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS文件中加載jquery.js的方法，JS文件添加其他JS的實例代碼，感興趣的小伙伴們可以參考一下，具體如下2018-05-05
微信小程序MUI側滑導航菜單示例(Popup彈出式,左側滑動,右側不動)
這篇文章主要介紹了微信小程序MUI側滑導航菜單,結合實例形式分析了微信小程序Popup彈出式,左側滑動,右側不動菜單功能相關實現(xiàn)技巧與注意事項,需要的朋友可以參考下2019-01-01