Home >Web Front-end >JS Tutorial >Detailed explanation of the steps for JS to load jquery.js

Detailed explanation of the steps for JS to load jquery.js

php中世界最好的语言Original: 2018-05-07 17:01:301833browse

This time I will bring you a detailed explanation of the steps for loading jquery.js in JS. What are the precautions for loading jquery.js in JS. The following is a practical case, let’s take a look.

There is a requirement recently:

1. Only one JS file can be introduced into an html, and no JS code or other JS files can be introduced;

2. This JS Other JS files must be introduced into the file;

3. All JS functions are written in this JS file. These codes use jquery-related stuff, so the first thing that needs to be solved here is how to introduce jquery. js.

Searched on the Internet and many methods were not very practical. Since I have been away from the WEB for many years, I finally asked a friend and got the following code:

1.js

// by firefoxmmx 
var script=document.createElement("script"); 
script.type="text/javascript"; 
script.src="jquery.js"; 
document.getElementsByTagName('head')[0].appendChild(script); 
setTimeout(function(){ 
$(document).ready(function(){ 
 $("#bt").click(function(){ 
  alert('Hello World'); 
 }); 
}); 
},100);

1.html code is as follows:

<html> 
<head> 
 <script type="text/javascript" src="1.js"></script> 
</head> 
<body> 
<input type="button" id="bt" value="Click" /> 
</body> 
</html>

If you want to test, you need to add jquery.js. You can download it yourself

After clicking the button, the effect is as shown below:

Here are some methods from the Internet:

1. Direct document.write

<script language="javascript">
 document.write("<script src=&#39;test.js&#39;><\/script>");
</script>

2. Dynamically change the src attribute of an existing script

<script src=&#39;&#39; id="s1"></script>
<script language="javascript">
 s1.src="test.js"
</script>

3. Dynamically create a script element

<script>
 var oHead = document.getElementsByTagName('HEAD').item(0);
 var oScript= document.createElement("script");
 oScript.type = "text/javascript";
 oScript.src="test.js";
 oHead.appendChild( oScript);
</script>

I believe you have mastered the method after reading the case in this article, and there will be more exciting things Please pay attention to other related articles on php Chinese website!

Detailed explanation of the steps for JS to load jquery.js

Related articles