首頁  >  文章  >  web前端  >  JS載入jquery.js步驟詳解

JS載入jquery.js步驟詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-07 17:01:301811瀏覽

這次帶給大家JS載入jquery.js步驟詳解,JS載入jquery.js的注意事項有哪些,下面就是實戰案例,一起來看一下。

最近有一個需求:

1.在一個html中只能引入一個JS檔案不能有JS程式碼和其他JS檔案的引入;

2.這個JS文件中還要引入其他的JS檔;

3.所有JS功能都寫在這個JS檔中這些程式碼用到了jquery相關的東東所以這裡第一個需要解決的就是怎麼引入jquery. js。

在網路上搜尋了很多方法都不太實用,由於我自己離開WEB多年最後向朋友詢問得到以下程式碼:

##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程式碼如下:

<html> 
<head> 
 <script type="text/javascript" src="1.js"></script> 
</head> 
<body> 
<input type="button" id="bt" value="Click" /> 
</body> 
</html>
如要測試還需要加上jquery.js 這個可自行下載

運行後點選按鈕效果如圖:

 

下面再附上網路上的一些方法:

1、直接document.write

<script language="javascript">
 document.write("<script src=&#39;test.js&#39;><\/script>");
</script>
2、動態改變已有script的src屬性

<script src=&#39;&#39; id="s1"></script>
<script language="javascript">
 s1.src="test.js"
</script>
3、動態創建script元素

<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>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

this指向與call、apply使用

webpack myproject建置專案時ip無法存取應如何處理

以上是JS載入jquery.js步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn