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实现图片平滑滚动详解
Mar 22 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
工地资料员岗位职责
2013/12/31 职场文书
法律系毕业生求职信
2014/05/28 职场文书
节约用水标语
2014/06/11 职场文书
工地质量标语
2014/06/12 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年女生节活动总结
2015/02/27 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python