js を head に配置すると失敗することがある理由を深く理解する-jsチュートリアル-php.cn

js を head に配置すると失敗することがある理由を深く理解する

迷茫

リリース： 2017-03-26 17:25:23

オリジナル

1284 人が閲覧しました

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 コードを本文に入れるか、window.onload = function(){} コードでラップし、ドキュメントが読み込まれた後に実行します。今後、これを頭に入れることはお勧めしません。

<!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 が機能しません。head 内で使用したい場合は、window.onload = function(){// を使用してください。コードはここにあります}

JS は外部 JS と内部 JS に分けられ、通常は head に配置されます。内部 js はこのページの JS スクリプトとも呼ばれます。
内部 js は通常、本文に配置されます。これには次のような目的があります。

1. ページの読み込みをブロックしないでください。キャッシュされます）。

2. js で dom を直接操作できます。この時点で dom は準備完了です。つまり、js の実行中に dom が存在することが保証されます。

3. 推奨される方法は、ページの下部に配置し、window.onload または readstate をリッスンして js をトリガーすることです。

4. 拡張子:

head 内の js は、ページの送信とページのレンダリングをブロックします。ヘッド内の JavaScript はボディのレンダリングを開始する前に実行する必要があるため、ヘッドには JS ファイルを配置しないようにしてください。ドキュメントの完成時、または特定のブロックの後に JavaScript を導入して実行することを選択できます。ヘッド内の JavaScript はボディのレンダリングを開始する前に実行する必要があるため、ヘッドには JS ファイルを配置しないようにしてください。ドキュメントの完成時、または特定のブロックの後に JavaScript を導入して実行することを選択できます。

そのため、通常、本体ページのレンダリングを開始する前に、ヘッド内の js を最初に実行する必要があります。 head によって導入された js スクリプトが、wanderer のメイン解析エンジンの DOM 解析作業をブロックしないようにするために、DOM をレンダリングする一般原則は、スタイルが先頭にあり、DOM ドキュメントがあり、スクリプトが最後にあるということです。。最初に解析し、次にレンダリングし、次にスクリプトを実行するという順序に従います。

以上がjs を head に配置すると失敗することがある理由を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。