A brief discussion on the placement of script in HTML

A brief discussion on the placement of script in HTML

I used to think that script could be placed anywhere in HTML, but today when I was working on a requirement, I corrected my wrong idea - the location of the script cannot be placed randomly.

First, I want to implement a select tag with two options, yes and no. However, when initializing, the select tag is required to select an empty value by default, so I added a method to delete the empty value when clicking:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3. < head >   
  4. < script   src = "jquery/jquery-1.11.1.min.js" > </ script >   
  5. </ head >   
  6. < script >   
  7. $('#checkcash').click(function () {
  8. if ($('#checkcash').val() == '0') {
  9. $("#checkcash option[ value = '0' ]").remove();
  10. }
  11. });
  12. $("#alert").click(function(){
  13. alert("1123");
  14. })
  15. </ script >   
  16. < body >   
  17. Has the cash been withdrawn ?   id = "checkcash"     style = "width: 181px" >   
  18.                              < option   selected = "selected"   value = "0" > </ option >   
  19.                              < option   value = "1" > Yes </ option >   
  20.                              < option   value = "2" > No </ option >   
  21.                              </ select >   
  22.                                 
  23.                              < input   type = 'button'   id = 'alert'   value = "anwo" >   
  24. </ body >   
  25.   
  26.   
  27. </ html >   

However, this did not achieve the desired effect. At first, I thought it was a jQuery syntax error, so I kept checking and modifying it online, but it didn't work. Later, I suddenly thought that I should put the script at the end. I tried it, and it turned out to be ok. Then I realized that this was not the case.

Later I checked the reason and found that it was because the HTML file was executed from top to bottom, but the order of the introduced CSS and JavaScript was different. When the CSS was introduced and loaded, the program still executed downwards, and when it executed to the <script> script, the thread was interrupted, and the program continued to execute after the script script was executed. Therefore, script is usually placed after body to avoid delay and blocking caused by long execution of script. To achieve some page effects, it is necessary to dynamically load some js scripts in advance, so these scripts should be placed before <body>. Secondly, you cannot put the js that needs to access DOM elements before the body, because the DOM has not yet started to be generated, so the js that accesses the DOM elements before the body will fail or be invalid. Because of this, I added methods to it when the DOM was not generated, which led to this.

I really should have learned more about many things, but I didn't go into them in depth. Keep working on it!

ps: In fact, there is another way, which is to use jquery's initialization page method. You can also add the click event added to the label above to $(function(){}). The principle is the same as above. This method will not be executed until the page is loaded, so it doesn't matter where you put it!

The above brief discussion on the placement of script in HTML is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<:  Solution to the garbled problem of web pages when the encoding is set to utf-8

>>:  Specific use of MySQL operators (and, or, in, not)

Recommend

Solve the mysql user deletion bug

When the author was using MySQL to add a user, he...

Detailed tutorial on Docker pulling Oracle 11g image configuration

Without further ado Start recording docker pullin...

A brief analysis of kubernetes controllers and labels

Table of contents 01 Common controllers in k8s RC...

In-depth analysis of the Linux kernel macro container_of

1. As mentioned above I saw this macro when I was...

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

Preface The string types of MySQL database are CH...

Basic usage knowledge points of mini programs (very comprehensive, recommended!)

Table of contents What to do when registering an ...

What is Nginx load balancing and how to configure it

What is Load Balancing Load balancing is mainly a...

Sample code for implementing Google third-party login in Vue

Table of contents 1. Developer Platform Configura...

Detailed explanation of how tomcat calls Servlet initialization from source code analysis

Table of contents introduction 1. Code to start t...

Data Structure - Tree (III): Multi-way Search Tree B-tree, B+ tree

Multi-way search tree Height of a complete binary...

Detailed explanation of system input and output management in Linux

Management of input and output in the system 1. U...

Echarts tutorial on how to implement tree charts

Treemaps are mainly used to visualize tree-like d...

js Promise concurrent control method

Table of contents question background Idea & ...

How to install MySQL for beginners (proven effective)

1. Software Download MySQL download and installat...

Common usage of regular expressions in Mysql

Common usage of Regexp in Mysql Fuzzy matching, c...