Eine kurze Diskussion über die Platzierung von Skripten in HTML

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
  1. <!DOCTYPE html >   
  2. < html >   
  3. <Kopf>   
  4. < Skript   src = "jquery/jquery-1.11.1.min.js" > </ Skript >   
  5. </ Kopf >   
  6. < Skript >   
  7. $('#checkcash').klick(Funktion () {
  8. wenn ($('#checkcash').val() == '0') {
  9. $("#checkcash option[ value = '0' ]").entfernen();
  10. }
  11. });
  12. $("#alert").klick(function(){
  13. Alarm("1123");
  14. })
  15. </ Skript >   
  16. < Textkörper >   
  17. Wurde das Geld abgehoben ?   id = "Scheckbargeld"     Stil = "Breite: 181px" >   
  18.                              < Option   ausgewählt = "ausgewählt"   Wert = "0" > </ option >   
  19.                              < Option   Wert = "1" > Ja </ Option >   
  20.                              < Option   Wert = "2" > Nein </ Option >   
  21.                              </ auswählen >   
  22.                                 
  23.                              < Eingabe   Typ = "Schaltfläche"   ID = "Alarm"   Wert = "anwo" >   
  24. </ Körper >   
  25.   
  26.   
  27. </ html >   

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

Analyse der Unterschiede zwischen Mysql InnoDB und MyISAM

MySQL unterstützt viele Arten von Tabellen (d. h....

Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows

Der detaillierte Prozess zum Konfigurieren des My...

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

Inhaltsverzeichnis 1. Installieren und erstellen ...

Der Unterschied zwischen br und br/ in HTML

Antwort von Stackflow: Einfaches <br> genügt...

CSS imitiert den sanften Umschalttasteneffekt von Apple

Inhaltsverzeichnis 1. Code-Analyse 2. Quellcode Q...

CSS Lieferadresse Parallelogramm Linienstil Beispielcode

Der Code sieht folgendermaßen aus: // Linienstil ...

Hinweise zum passenden MySql 8.0 und entsprechenden Treiberpaketen

MySql 8.0 entsprechendes Treiberpaket passend Nac...

Reines CSS-Dropdown-Menü

Ergebnisse erzielen Implementierungscode html <...

Docker erstellt Cluster-MongoDB-Implementierungsschritte

Vorwort Aufgrund der Geschäftsanforderungen des U...

So betten Sie Dateien im Flash-Videoformat (FLV, SWF) in HTML-Dateien ein

Flash-Dateiformate: .FLV und .SWF Für das Flash-Vi...

Zusammenfassung der 16 XHTML1.0- und HTML-Kompatibilitätsrichtlinien

1. Vermeiden Sie es, die Seite als XML-Typ zu dek...

So legen Sie den Produktionsumgebungsmodus process.env.NODE_ENV fest

Bevor ich anfange, möchte ich betonen, dass proce...