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

<!DOCTYPE html >
< html >
< head >
< script src = "jquery/jquery-1.11.1.min.js" > </ script >
</ head >
< script >
$('#checkcash').click(function () {
if ($('#checkcash').val() == '0') {
$("#checkcash option[ value = '0' ]").remove();
}
});
$("#alert").click(function(){
alert("1123");
})
</ script >
< body >
Has the cash been withdrawn ? id = "checkcash" style = "width: 181px" >
< option selected = "selected" value = "0" > </ option >
< option value = "1" > Yes </ option >
< option value = "2" > No </ option >
</ select >
< input type = 'button' id = 'alert' value = "anwo" >
</ body >
</ 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)