首頁 > web前端 > js教程 > 深入理解js為什麼放到head有時候失效

深入理解js為什麼放到head有時候失效

迷茫
發布: 2017-03-26 17:25:23
原創
1290 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板