Eine kurze Diskussion über die Platzierung von Skripten in HTML
|
Früher dachte ich, dass Skripte überall in HTML platziert werden könnten, aber heute, als ich an einer Anforderung arbeitete, korrigierte ich meine falsche Vorstellung – die Position des Skripts kann nicht beliebig platziert werden. Zuerst möchte ich ein Select-Tag mit zwei Optionen implementieren, „yes“ und „no“. Beim Initialisieren muss das Select-Tag jedoch standardmäßig einen leeren Wert auswählen, daher habe ich eine Methode hinzugefügt, um den leeren Wert beim Klicken zu löschen: XML/HTML-CodeInhalt in die Zwischenablage kopieren
Dies führte jedoch nicht zum gewünschten Ergebnis. Zuerst dachte ich, es handele sich um einen jQuery-Syntaxfehler, also überprüfte und änderte ich es online weiter, aber es funktionierte nicht. Später kam mir plötzlich der Gedanke, dass ich das Skript am Ende einfügen sollte. Ich versuchte es und es stellte sich heraus, dass es in Ordnung war. Dann wurde mir klar, dass dies nicht der Fall war. Später habe ich den Grund überprüft und festgestellt, dass es daran lag, dass die HTML-Datei von oben nach unten ausgeführt wurde, aber die Reihenfolge der eingeführten CSS und JavaScript unterschiedlich war. Als das CSS eingeführt und geladen wurde, wurde das Programm immer noch nach unten ausgeführt, und als es bis zum Skript <script> ausgeführt wurde, wurde der Thread unterbrochen und das Programm wurde weiter ausgeführt, nachdem das Skript ausgeführt wurde. Daher wird das Skript normalerweise nach dem Hauptteil platziert, um Verzögerungen und Blockierungen durch die lange Ausführung des Skripts zu vermeiden. Um einige Seiteneffekte zu erzielen, müssen einige JS-Skripte vorab dynamisch geladen werden. Daher sollten diese Skripte vor <body> platziert werden. Zweitens können Sie das JS, das auf DOM-Elemente zugreifen muss, nicht vor den Textkörper setzen, da mit der DOM-Generierung noch nicht begonnen wurde. Daher würde das JS, das auf die DOM-Elemente vor dem Textkörper zugreift, fehlschlagen oder ungültig sein. Aus diesem Grund habe ich Methoden hinzugefügt, als das DOM nicht generiert wurde, was zu folgendem führte. Über viele Dinge hätte ich wirklich mehr erfahren sollen, bin aber nicht in die Tiefe gegangen. Arbeiten Sie weiter daran! ps: Tatsächlich gibt es noch eine andere Möglichkeit, nämlich die Verwendung der Seiteninitialisierungsmethode von jQuery. Sie können das Klickereignis, das dem obigen Label hinzugefügt wurde, auch zu $(function(){}) hinzufügen. Das Prinzip ist das gleiche wie oben. Diese Methode wird erst ausgeführt, wenn die Seite geladen ist, es ist also egal, wo Sie sie ablegen! Die obige kurze Diskussion über die Platzierung von Skripten in HTML ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. |
<<: Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist
>>: Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)
Artikel empfehlen
Detaillierte Erklärung verschiedener Join-Zusammenfassungen von SQL
SQL Left Join, Right Join, Inner Join und Natural...
Importieren Sie die CSV-Datei mit Navicat in MySQL
In diesem Artikel wird der spezifische Code zum I...
Vue - benutzerdefinierte gekapselte Schaltflächenkomponente
Der benutzerdefinierte Kapselungscode der Vue-But...
Analysieren Sie das Problem beim Herunterladen der Oracle 11g-Image-Konfiguration in Docker
1. Ziehen Sie das Bild Docker-Pull-Registrierung....
Erklärung des Konzepts und der Verwendung von Like in MySQL
Like bedeutet auf Chinesisch „wie“, aber wenn es ...
Der HTML-Seitenkopfcode ist völlig klar
Alle folgenden Codes stehen zwischen <head>....
Detaillierte Erklärung des gesamten Prozesses und der Schritte zur Installation von Clion auf Ubuntu16.04
Erklären Sie den gesamten Prozess von CLion von G...
Praxis des El-Cascader-Kaskadenselektors in ElementUI
Inhaltsverzeichnis 1. Wirkung 2. Hauptcode 1. Wir...
So verwenden Sie die HTML-Formularattribute „schreibgeschützt“ und „deaktiviert“
1. readonly Nur-Lese-Attribut, so dass Sie den Wer...
Docker installiert Redis 5.0.7 und behebt externe Konfigurations- und Datenprobleme
Redis ist eine Open-Source-NoSQL-Datenbank, die i...
Detaillierte Erläuterung der Nginx-Upstream-Konfiguration und -Funktion
Konfigurationsbeispiel Upstream-Backend { Server ...
MySQL-Methode zur Sperrensteuerung für Parallelität
Inhaltsverzeichnis Vorwort 1. Optimistisches Sper...
Detaillierte Erklärung der Webseiten-Screenshot-Funktion in Vue
Seit Kurzem besteht im Projekt die Anforderung, B...
So ändern Sie schnell die Tabellenstruktur einer MySQL-Tabelle
Tabellenstruktur einer MySQL-Tabelle schnell ände...
Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben
So lösen Sie das Problem des Vergessens des Root-...