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层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery插件懒加载的示例
Oct 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
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python计算最大优先级队列实例
2013/12/18 Python
Python中的super用法详解
2015/05/28 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python如何更新包
2020/06/11 Python
python交互模式基础知识点学习
2020/06/18 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
英语专业应届生求职信范文
2013/11/15 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
委托书范本格式
2019/04/18 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
python 安全地删除列表元素的方法
2022/03/16 Python