Heim > Artikel > Web-Frontend > Verstehen Sie genau, warum js manchmal fehlschlägt, wenn es im Kopf platziert wird
Verstehen Sie genau, warum js manchmal fehlschlägt, wenn es im Kopf platziert wird
- 迷茫Original
- 2017-03-26 17:25:231224Durchsuche
1. Ich bin heute beim Schreiben von js auf ein seltsames Problem gestoßen. Das geschriebene js wurde zur Ausführung im Text platziert, aber es hatte keine Wirkung, als es im Kopf platziert wurde.
Sehen Sie sich den ungültigen Code an:
<!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. Lösung: Fügen Sie den js-Code in den Textkörper ein oder verwenden Sie das Codepaket window.onload = function(){} und laden Sie ihn dann Es wird nicht empfohlen, das Dokument Execution in Zukunft in den Kopf zu stellen.
<!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. Grund:
Da das Dokument noch nicht geladen wurde und ich js lese, funktioniert das js nicht. Wenn Sie es im Kopf verwenden möchten, verwenden Sie window .onload = function() {//Verbinden Sie Ihren Code hier🎜>
JS kann in externes und internes unterteilt werden. Externes JS wird im Allgemeinen im Kopf platziert. Das interne JS wird auch als JS-Skript dieser Seite bezeichnet. Es gibt viele Zwecke dafür:
Blockiert nicht das Laden der Seite (Tatsächlich werden die js zwischengespeichert).
2. Sie können den Dom direkt in js betreiben. Zu diesem Zeitpunkt ist der Dom bereit, was bedeutet, dass der Dom existiert, wenn js ausgeführt wird.
3. Die empfohlene Methode besteht darin, es unten auf der Seite zu platzieren und auf window.onload oder readystate zu hören, um js auszulösen.
4. Erweiterung:
Die js im Kopf blockieren die Übertragung der Seite und das Rendern der Seite. Das JavaScript im Kopf muss ausgeführt werden, bevor mit dem Rendern des Körpers begonnen wird. Versuchen Sie daher, keine JS-Dateien im Kopf zu platzieren. Sie können JavaScript einführen und ausführen, wenn das Dokument fertig ist oder nach einem bestimmten Block. Das JavaScript im Kopf muss ausgeführt werden, bevor mit dem Rendern des Körpers begonnen wird. Versuchen Sie daher, keine JS-Dateien im Kopf zu platzieren. Sie können JavaScript einführen und ausführen, wenn das Dokument fertig ist oder nach einem bestimmten Block.
Daher müssen die js im Kopf zuerst ausgeführt werden, bevor die Hauptseite gerendert wird. Um zu verhindern, dass das von head eingeführte js-Skript die DOM-Parsing-Arbeit der Haupt-Parsing-Engine im Wanderer blockiert, besteht das allgemeine Prinzip beim Rendern von DOM darin, dass der Stil vorne, das DOM-Dokument und das Skript am Ende steht . Befolgen Sie die Reihenfolge: Zuerst analysieren, dann rendern und dann das Skript ausführen.
Das obige ist der detaillierte Inhalt vonVerstehen Sie genau, warum js manchmal fehlschlägt, wenn es im Kopf platziert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!