JS单独文件写后JQuery生效方式

最新推荐文章于 2023-08-12 10:47:33 发布
最新推荐文章于 2023-08-12 10:47:33 发布
阅读量2.3k 收藏
点赞数
分类专栏： 基础知识 前端知识

最近有一个需求：

1.在一个html中只能引入一个js文件 不能有JS代码和其他JS文件的引入

2.这个JS文件中 还要引入其他的JS文件

3.所有JS功能都写在这个JS文件中 这些代码用到了jQuery相关的东东 所以这里第一个需要解决的就是怎么引入jquery.js


在网上搜索了很多方法都不太实用，由于我自己离开WEB多年 最后向朋友询问得到以下代码

1.js

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>

下面再附上网上的一些方法：

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通信了~




ZacharyAdams
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery
m0_56463670的博客
09-06 104
语法 jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() 美元符号定义 jQuery 选择符（selector）“查询"和"查找” HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $(“p”).hide() - 隐藏所有 元素 $(“p.test”).hide() - 隐藏所有 class=“test” 的 元素 $("#test
JS文件中加载jquery.js(JS文件添加其他JS文件)
主宰
08-24 5916
最近有一个需求： 1.在一个html中只能引入一个js文件 不能有JS代码和其他JS文件的引入 2.这个JS文件中 还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中 这些代码用到了jQuery相关的东东 所以这里第一个需要解决的就是怎么引入jquery.js 在网上搜索了很多方法都不太实用，由于我自己离开WEB多年 最后向朋友询问得到以下代码
jquery快速使用文档
景姑娘的肥猫
01-22 809
jQuery简单使用文档 jquery很久没有使用了，文档也很近没有更新维护了，不对的地方自行百度，或参考其他教程 1、介绍 jQuery是js的库。也就是说jQuery是很多js的方法封装在了一个文件中。 jQuery是前端编程中使用最多的库。曾经风靡前端。 $.fn是jQuery的原型对象 2、优点： 强大的选择器机制 优质的隐式迭代 无所不能的链式编程 官网：jquery.com 中文方法大全：jquery.cuishifeng.cn 3、引用方法和检测 要使用jquery首先需要下载一个jque
JQuery实现小项目
xyk：的博客
05-25 2297
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。拥有便捷的插件扩展机制和丰富的插件。总的来说，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API。想下载的看下我的码云~~
一个html可以引入多个js,一个HTML文件引入多个JS文件onload的问题
weixin_33252423的博客
06-18 3680
在用canvas些一个游戏，用MVC的设计模式，把js文件分成了3个，分别代表M,V,C。但是在执行过程中，三个文件都要在window.onload的时候执行。但是window.onload在一个html文件中只能有一个存在。当然，在一个js文件中我知道可以这样做：window.onload=function(){funtion1(){};funtion2(){};}但是像这样的多个JS文件，而且...
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
12-01
【jQuery的load方法】 ...总的来说，通过正确使用jQuery的load方法，结合适当的策略处理JavaScript加载，我们可以有效地构建动态后台系统，提供流畅的用户体验，同时避免因页面动态加载导致的JavaScript失效问题。
js中的前绑定和后绑定详解
10-27
JavaScript中的前绑定（Pre-Binding）和后绑定（Post-Binding）是关于事件处理程序注册的概念，它们在处理动态创建的DOM元素时尤其重要。在实际的Web开发中，我们经常需要为页面上的元素添加事件监听器，这些元素...
jQuery input文本框点击下拉菜单选择代码
10-24
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作...你可以将这些代码放在`<script>`标签内，或者单独保存为一个.js文件并链接到HTML文档中。记得根据你的实际需求调整`options`数组的内容。
jQuery擦除插件eraser使用方法详解
10-15
如果试图在初始化后单独设置这些选项，它们可能不会生效。 ### 总结 jQuery.eraser插件为网页添加了创新的交互性，使得用户可以像使用真实橡皮擦一样擦除图片的某些部分。通过理解其工作原理和掌握使用方法，...
解决jquery appaend元素中id绑定事件失效的问题
10-19
这是因为JavaScript的事件处理方式是基于DOM（文档对象模型）的，当元素在页面加载完成后才被添加到DOM树中，原有的事件绑定不会自动应用到这些新元素上。标题和描述提到的问题正是这种情况，即使用`append`方法添加...
jquery动态加载js/css文件方法(自写小函数)
10-25
jquery自带的getSrcript文件只能动态加载js代码，但不能加载css，后来自己写了一个可加载js与css的程序
手写jquery（自己封装）
m0_55734030的博客
11-23 971
我们都知道`jQuery`，jQuery是一个快速的，简洁的javaScript库。它的出现让我们不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。 这篇文章主要适合新手，尝试自己去封装jQuery，同时加深对jQuery的理解。
如何在单独js文件中引用Jquery
热门推荐
u011442439的专栏
07-04 4万+
    其实这个问题并不是一个方法性的问题，我也不需要提示你如何操作，只需要帮助你理解其中原理，你也许就恍然大悟了这里我先说结果给那些心急的同学先用，    其实你如果希望在单独的js文件里使用Jquery，直接使用就可以了，你不需要任何的引入操作,因为引入操作在前端页面已经执行了，你在单独的js文件里所需要的东西等于前面已经有了，当然可以直接使用了.当然前端页面的引入顺序当然也需要jquery库...
2024届暑期实习前端面经（美团，知乎，众安保险，同程旅行，深信服）
weixin_54079103的博客
05-18 1129
2024届暑期实习前端面试经验2023（美团，知乎，众安金融，同程旅行，深信服）
HTML基础
qq_44572030的博客
12-06 409
JavaScript高级程序设计-HTML基础 1，多个script标签引入多个外部js文件，如果可以，可以考虑合成一个js文件。因为多个script请求js文件，就会让浏览器请求多次，合成一个只去请求一次更节省内存。 2，在浏览器不支持脚本，或者浏览器对脚本的支持关闭，包含在中的内容会被渲染，否则用户永远不会看到的内容。 3，将多个页面分散的js代码合并到一个js文件中，更容易维护，并且浏览器会根据特定的设置缓存，相同的链接只会请求一次，会加载更快 4，标签语义化，尽可能的做。 5，JavaScript核
在js的单独文件中使用jQuery
清风自来
06-17 1万+
在js文件中是可以单独使用jQuery的，但是jQuery必须要在该js文件之前导入 否则js文件将无法识别 例如 &amp;lt;script src=&quot;../js/jquery-3.3.1.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;../js/mobile/mobileLogin.js&quot;&am
JS+JQ插件
suhaiyuan2005的博客
08-27 215
01，JS基本介绍 1，js 其实就是 javascript 的缩写，它就是一种编程语言。 2，JS 可以实现网页动画和前后端数据交互。 3，Wed 标准就是 结构 样式 行为 三者相分离，而行为 就是由 JS 来实现，所以就是 JS 可以控制 html 及 css 。 1.2 JS 基本书写步骤 1，js 和 css 一样也可以直接写在 html 页面当中。它同样需要准备一个标签 来存放我们具体的 js代码。 2，此时我们就建议大家在 html 结果标签的下方 书写一个 script 标签对，然后在它里
深入浅出JavaScript （五） 详解Document.write()方法
weixin_33759269的博客
01-23 718
一直用document.write()方法向浏览器中显示数据用，把它当做Alert()使用， 看来这样用有些大材小用了，下面说说它的主要用处。 document.write()方法可以用在两个方面： 1.页面载入过程中，用脚本加入新的页面内容。 2.用延时脚本创建本窗口或新窗口的内容。 该方法...
jQuery使用（超详细）
最新发布
Eliauk_Doubling的博客
08-12 1万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
单独的js文件中怎么才能调用jquery方法
05-31
如果你想在单独的JS文件中使用jQuery方法，你需要先在HTML文件中引入jQuery库，然后再在单独的JS文件中调用jQuery方法。 以下是一种常见的方式，可以在HTML文件中引入jQuery库，并在单独的JS文件中使用jQuery方法： 在HTML文件中引入jQuery库： ```html <!-- 引入jQuery库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入单独的JS文件 --> <script src="path/to/your/js/file.js"></script> ``` 在单独的JS文件中使用jQuery方法： ```javascript // 在这里可以使用jQuery方法 $(document).ready(function() { // jQuery代码 }); // 也可以使用纯JavaScript方法 document.addEventListener("DOMContentLoaded", function() { // JavaScript代码 }); ``` 以上代码中，`$`符号是jQuery的别名，`$(document)`表示选择整个文档对象，`.ready()`方法表示文档加载完成后执行的函数。在单独的JS文件中，需要等到文档加载完成后才能使用jQuery方法，因此需要在`$(document).ready()`方法中编写jQuery代码。 另外，还可以使用纯JavaScript的`DOMContentLoaded`事件来替代jQuery的`$(document).ready()`方法，实现文档加载完成后执行JavaScript代码的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值