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处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
php写app用的框架整理
2019/09/29 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
TypeScript入门-接口
2017/03/30 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
python字典序问题实例
2014/09/26 Python
Python异常处理操作实例详解
2018/05/10 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
承诺书格式
2014/06/03 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
超市开店计划书
2014/09/15 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
ant design charts 获取后端接口数据展示
2022/05/25 Javascript