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实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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执行速度全攻略(下)
2006/10/09 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
canvas时钟效果
2017/02/16 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
简单了解如何封装自己的Python包
2020/07/08 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
八年级语文教学反思
2014/02/11 职场文书
法院答辩状格式
2015/05/22 职场文书
mysql知识点整理
2021/04/05 MySQL
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技