Comprendre en profondeur pourquoi js échoue parfois lorsqu'il est placé dans la tête-js tutoriel-php.cn

Comprendre en profondeur pourquoi js échoue parfois lorsqu'il est placé dans la tête

迷茫

Libérer： 2017-03-26 17:25:23

original

1324 Les gens l'ont consulté

1. J'ai rencontré un problème étrange lors de l'écriture de js aujourd'hui. Le js écrit a été placé dans le corps pour l'exécution, mais il n'a eu aucun effet lorsqu'il a été placé dans la tête. Pourquoi est-ce arrivé ?

Regardez le code invalide :

<!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>

Copier après la connexion

2. Solution : mettez le code js dans le corps ou utilisez le package de code window.onload = function(){}, puis chargez le document Exécution, il n'est pas recommandé de le mettre en tête à l'avenir.

<!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>

Copier après la connexion

3. Raison :

Parce que le document n'a pas encore été chargé et que j'ai lu js, le js ne fonctionne pas. Si vous souhaitez l'utiliser dans le head, utilisez window. .onload = function() {//Enveloppez votre code ici>

Le JS peut être divisé en externe et interne. Le JS externe est généralement placé dans la tête. Le js interne est également appelé le script JS de cette page.
Le js interne est généralement placé dans le corps. Il existe de nombreuses raisons pour cela :

1. (en fait, les js seront mis en cache).

2. Vous pouvez utiliser dom directement dans js À ce stade, dom est prêt, ce qui signifie que dom est garanti d'exister lorsque js est en cours d'exécution.

3. La méthode recommandée est de le placer en bas de la page et d'écouter window.onload ou readystate pour déclencher js.

4. Extension :

Le js dans la tête bloquera la transmission de la page et le rendu de la page. Le JavaScript dans l'en-tête doit être exécuté avant de commencer le rendu du corps, alors essayez de ne pas placer de fichiers JS dans l'en-tête. Vous pouvez choisir d'introduire et d'exécuter JavaScript lorsque le document est terminé ou après un bloc spécifique. Le JavaScript dans l'en-tête doit être exécuté avant de commencer le rendu du corps, alors essayez de ne pas placer de fichiers JS dans l'en-tête. Vous pouvez choisir d'introduire et d'exécuter JavaScript lorsque le document est terminé ou après un bloc spécifique.

Le js dans le head doit donc être exécuté avant de rendre la page du corps. Afin d'éviter que le script js introduit par head ne bloque le travail d'analyse DOM du moteur d'analyse principal dans Wanderer, le principe général du rendu du DOM est que le style est au premier plan, le document DOM et le script à la fin. . Suivez d'abord l'ordre d'analyse, puis de rendu, puis d'exécution du script.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!