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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
html中两种获取标签内的值的方法
Jun 16 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数据类型转换
2014/01/09 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python如何操作mysql
2020/08/17 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
《美丽的黄昏》教学反思
2014/02/28 职场文书
地理教师岗位职责
2014/03/16 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫