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
So erhalten Sie den Inhalt einer TXT-Datei über FileReader in JS
Inhaltsverzeichnis JS erhält den Inhalt der TXT-D...
Die „3I“-Standards für erfolgreiche Printwerbung
Für viele inländische Werbetreibende ist die Erste...
Installieren Sie mehrere PHP-Versionen für Nginx unter Linux
Wenn wir die LNPM-Serverumgebung installieren und...
Vue + Element UI realisiert Ankerpositionierung
In diesem Artikelbeispiel wird der spezifische Co...
Mini-Programm implementiert benutzerdefinierte mehrstufige Einzelauswahl und Mehrfachauswahl
In diesem Artikel wird der spezifische Code zur I...
vue+elementui implementiert den vollständigen Code zum Hinzufügen und Ändern einer gemeinsamen Bullet-Box
Inhaltsverzeichnis 1. Neu II. Änderung element-ui...
Analyse des Prozesses zur Konfiguration des Alibaba Cloud-Proxy-Warehouses basierend auf Nexus
Das Standard-Remote-Repository von Nexus ist http...
Installieren Sie MySQL 5.7.17 im Win10-System
Das Betriebssystem Win10 MySQL ist die 64-Bit-ZIP...
Implementierung der Vue-Nuxt-Anmeldeauthentifizierung
Inhaltsverzeichnis einführen Link Start Gehen Sie...
Zusammenfassung der Konstruktor- und Superwissenspunkte in React-Komponenten
1. Einige Tipps zu mit class in react deklarierte...
Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren
1. parseFloat()-Funktion Erstellen Sie auf einer ...
Div kann Inhalte eingeben, ohne die Eingabe als Eingabefeld zu verwenden, um den automatischen Eingabestil zu blockieren
Heute habe ich einen dynamischen Fensterstil für d...
Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port
Apache: Virtuellen Host basierend auf Port erstel...
So beheben Sie Dateisystemfehler in Linux mit „fsck“
Vorwort Das Dateisystem ist für die Organisation ...
Beispielcode zur Implementierung einer Auto-Increment-Sequenz in MySQL
1. Erstellen Sie eine Sequenztabelle CREATE TABLE...