简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

迷茫
Libérer： 2017-03-26 17:25:23
original
1258 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!

Étiquettes associées：
js，head，js失效
source：php.cn
Article précédent：Résumé des attributs de la méthode objet Array dans javacsript Article suivant：Comment utiliser JS natif pour implémenter le changement d'onglet
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
JavaScript ne fonctionne pas comme prévu J'essaie de rendre htmlcssjs réactif mais cela ne fonctionne pas comme prévu, lorsqu'il es...
Depuis 2024-04-04 13:05:32
0
1
306
La question est toujours la même, mais le titre est réécrit comme suit : Ma fonction aléatoire Javascript ne parvient pas à générer des réponses valides Je crée un simple jeu générateur de nombres aléatoires en utilisant JS et HTML. Dans ce je...
Depuis 2024-04-03 22:03:14
0
1
275
Comment appliquer efficacement des fichiers « css » et « js » personnalisés à tous les administrateurs d'une application ? J'ai des fichiers CSS et js personnalisés, admin.py et base.html remplacé situés dans temp...
Depuis 2024-04-03 20:54:06
0
1
400
3. Le modèle JS 3D a été ajouté mais n'est pas visible J'essaie d'ajouter un modèle 3D à mon site Web. J'utilise trois .js. J'ai tout essayé mais...
Depuis 2024-04-03 19:06:13
0
1
264
Comment obtenir la valeur d'entrée via l'événement onblur ? J'essaie d'obtenir la valeur saisie via l'événement onblur mais cela ne fonctionne pas lor...
Depuis 2024-04-03 08:55:32
0
1
360
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！