深入理解js為什麼放到head有時候失效
- 迷茫原創
- 2017-03-26 17:25:231224瀏覽
1.今天寫js碰到一個奇怪的問題，寫好的js放到body裡面執行，但是放到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" />
<p id="enter" class="login"> 登录</p>
</body></html>2.解決方法：把js程式碼放到body中，或是利用 window.onload = function(){}程式碼包裹，文件載入之後再執行，以後不建議放到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" />
<p id="enter" class="login"> 登录</p>
</body></html>3.原因：
因為文件還沒加載，就讀了js，js就不起作用了想在head裡用的話，用window.onload = function(){/ /這裡包裹你的程式碼}
js可以分為外部的和內部的，外部的js一般放到head內。內部的js也叫本頁面的JS腳本，
內部的js一般放到body內，這樣做的目的有很多：
1.不阻塞頁面的載入(事實上js會被緩存)。
2.可以直接在js裡操作dom，這時候dom是準備好的，也就是保證js運行時dom是存在的。
3.建議的方式是放在頁面底部，監聽window.onload 或 readystate 來觸發js。
4.延伸：
head內的js會阻塞頁面的傳輸和頁面的渲染。 head 內的 JavaScript 需要執行結束才開始渲染 body，所以盡量不要將 JS 檔案放在 head 內。可以選擇在 document 完成時，或特定區塊後引入和執行 JavaScript。 head 內的 JavaScript 需要執行結束才開始渲染 body，所以盡量不要將 JS 檔案放在 head 內。可以選擇在 document 完成時，或特定區塊後引入和執行 JavaScript。
所以在head內的js一般要先執行完後，才開始渲染body頁面。為了避免head引入的js腳本阻塞流浪器中主解析引擎對dom的解析工作，對dom的渲染，一般原則是，樣式在前面，dom文檔，腳本在最後面。遵循先解析再渲染再執行script這個順序。
以上是深入理解js為什麼放到head有時候失效的詳細內容。更多資訊請關注PHP中文網其他相關文章！