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.load()和Jsp的include的区别
Apr 12 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 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学习之PHP变量
2006/10/09 PHP
php 上传功能实例代码
2010/04/13 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php日期操作技巧小结
2016/06/25 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python开启debug模式的方法
2019/06/27 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Django框架 信号调度原理解析
2019/09/04 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Ref与out有什么不同
2012/11/24 面试题
前处理组长岗位职责
2014/03/01 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS