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复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP如何使用Memcached
2016/04/05 PHP
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
详解Python学习之安装pandas
2019/04/16 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
优秀生推荐信范文
2013/11/28 职场文书
九年级语文教学反思
2014/02/04 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL