Detailed explanation of the method of loading jquery.js in JS-JS Tutorial-php.cn

Detailed explanation of the method of loading jquery.js in JS

php中世界最好的语言

Release： 2018-05-12 14:01:23

Original

1902 people have browsed it

This time I will bring you a detailed explanation of the method of 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.

I searched a lot of methods on the Internet but they are not very practical. Since I have left 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);

Copy after login

The 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>

Copy after login

If you want to test, you need to add jquery.js. This can be downloaded by yourself.

The effect of clicking the button after running 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>

Copy after login

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>

Copy after login

3. Dynamically create script elements

<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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!