Home > Web Front-end > JS Tutorial > body text

How to load jquery.js inside JS file

php中世界最好的语言
Release: 2018-05-23 14:37:51
Original
1346 people have browsed it

This time I will show you how to load jquery.js in a JS file, and what are the precautions on how to load jquery.js in a JS file. 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);
Copy after login

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. 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>
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 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>
Copy after login
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!

Recommended reading:

What are the ways to automate vue forms

How to build a forum with node bootstrap

The above is the detailed content of How to load jquery.js inside JS file. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!