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库冲突的完美解决办法
May 20 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php动态绑定变量的用法
2015/06/16 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Django中的Model操作表的实现
2018/07/24 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
怎样写好创业计划书的内容
2014/02/06 职场文书
职业女性的职业规划
2014/03/04 职场文书
小学生反邪教心得体会
2016/01/15 职场文书