JS文件中加载jquery.js的实例代码


Posted in jQuery onMay 05, 2018

本文表述了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 这个可自行下载

运行后点击按钮效果如图:

 JS文件中加载jquery.js的实例代码

下面再附上网上的一些方法:

1、直接document.write

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

2、动态改变已有script的src属性

<script src='' 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>

其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
基于jquery实现左右上下移动效果
May 02 #jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
毕业生求职的求职信
2013/12/05 职场文书
厂长助理岗位职责
2013/12/27 职场文书
个人贷款担保书
2014/04/01 职场文书
入职担保书怎么写
2014/05/12 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
检讨书怎么写
2015/05/07 职场文书
小爸爸观后感
2015/06/15 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技