Home > Article > Web Front-end > A brief discussion on the placement of script in html
A brief discussion on the placement of script in html
- 高洛峰Original
- 2017-02-11 14:23:541583browse
The editor below will bring you a brief discussion on the placement of scripts in HTML. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look.
I used to think that scripts can be placed anywhere in HTML. I corrected my wrong thinking when I made a request today - the location of scripts is not just random. of.
First of all, I want to implement a select tag with two options: yes and no. However, during initialization, the select tag is required to select a null value by default, so I added a method to let it change the null value when clicking. Delete:
XML/HTML Code Copy the content to the 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>
是否已提现 <select id="checkcash" style="width: 181px">
<option selected="selected" value="0"></option>
<option value="1">是</option>
<option value="2">否</option>
</select>
<input type='button' id='alert' value="anwo">
</body>
</html>
But this does not achieve the desired effect. At first I thought it was a jquery syntax error and I kept checking and correcting it online, but it didn't work. Then I suddenly thought about whether I should put the script at the back. I tried it and it turned out to be ok. Then I suddenly realized that it was not like this.
Later I checked the reason because the html file is executed in a top-down manner, but the order of the imported css and javascript is different. When the css is introduced for execution and loading, the program is still executed downwards, and When the 3f1c4e4b6b16bbbd69b2ee476dc4f83a script is executed, the thread is interrupted, and the program continues execution only after the execution of the script script is completed. Therefore, the script is generally placed after the body to avoid delayed blocking due to long execution of the script. To achieve the effects of some pages, some js scripts need to be dynamically loaded in advance, so these scripts should be placed before 6c04bd5ca3fcae76e30b72ad730ca86d. Secondly, the js that needs to access the dom element cannot be placed before the body, because the dom has not been generated yet, so the js that accesses the dom element before the body will be wrong or invalid. It is because of this that I added methods to the dom before it was generated, which led to this.
I really should study more. I think it’s so, but I haven’t studied it in depth. Keep working hard in the future!
ps: In fact, there is another way, which is to use jquery's initialization page method. It is also possible to add the click event added to the label above to $(function(){}). The principle is the same It’s the same as above. This method is executed after the page is loaded, so it can be used no matter where it is placed!
The above article briefly discussing the placement of scripts in HTML is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.
For more articles about the placement of scripts in HTML, please pay attention to the PHP Chinese website!