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的选中方法(实例讲解)
Jun 27 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 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
详解js异步文件加载器
2016/01/24 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
python的launcher用法知识点总结
2020/08/07 Python
python实现双人五子棋(终端版)
2020/12/30 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
大学应届生的自我评价
2014/03/06 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
个人投资合作协议书
2014/10/12 职场文书
公务员个人年终总结
2015/02/12 职场文书
小学教师节活动总结
2015/03/20 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
SSM VUE Axios详解
2021/10/05 Vue.js