当前位置: 首页 > 编程笔记 >

在jQuery中使用$而避免跟其它库产生冲突的方法

王旺
2023-03-14
本文向大家介绍在jQuery中使用$而避免跟其它库产生冲突的方法,包括了在jQuery中使用$而避免跟其它库产生冲突的方法的使用技巧和注意事项,需要的朋友参考一下

在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。
第一种情况:jquery.js在prototype.js之后进行引入,如:

<script src="prototype.js" type="text/javascript"/> <script src="jquery.js" type="text/javascript"/>
在这种情况下,我们在自己的js代码中如下写的话:

$('#msg').hide(); 

$永远代表的是jquery中定义的$符号,也可以写成JQuery('#msg').hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。


第二种情况:jquery.js在prototype.js之前进行引入,如:

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

在这种情况下,我们在自己的js代码中如下写的话:

$('#msg').hide(); 

$此时代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery('#msg').hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict()
该方法的作用就是让Jquery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是jquery。它的返回值是JQuery。当在代码中调用了该 方法以后,我们就不可以使用$来调用jquery的方法了,此时$就代表在prototype.js库中定义的$了。如下:

JQuery.noConflict();//此处不可以再写成$('#msg').hide(),此时的$代表prototype.js中定义的$符号。 JQuey('#msg').hide();
自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。
将 jQuery 设置为 no-conflict 模式后,可以给$设置个别名:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

如果还想继续是用 jQuery 的$,需要将代码包含在一个自执行的函数内,这也是一些 jQuery 插件作者的通用做法,因为这些作者并不知道项目中是否引用了其它库:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>


二.自定义JQuery的别名
如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,我们还可以为JQuery重定义别名。如下:

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。


三.使用语句块,在语句块中仍然使用jquery.js中定义的$,如下:

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

或者使用如下语句块:

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>


代码

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。


 类似资料:
  • 我试图在中使用来创建一个新变量,在这个变量中,我将一些值设置为missing并同时重新编码其他值。 但是,如果尝试将值设置为,则会出现一个错误,说明我们无法创建变量,因为是逻辑的: mutate_impl(.data,dots)中出错: 计算错误:类型必须是double,不是逻辑。 在数据帧的非逻辑向量中,是否有方法使用此设置值?

  • 问题内容: 最近,我被分配创建拍卖系统的任务。在我的工作中,我遇到了无数次由于列名不明确而导致包含联接的SQL查询无法执行的情况。考虑以下(简化的)拍卖表结构: 表: (创建拍卖的用户的ID) 表: (添加项目的用户的ID) (有该物品的拍卖的ID) (初始价格) 表: 表: (出价的用户的ID) (已提高价格的项目) (优惠价格) 如您所见,有许多列具有冲突的名称。连接这些表需要采取一些措施来消

  • 我们使用一个停靠的postgres数据库,并让hibernate自动生成用于集成测试的表(使用spring.jpa.hibernate.ddl-auto:create)。使用H2之类的东西不是一种选择,因为我们在少数地方执行一些特定于数据库的操作,例如原生SQL查询。 当所有实体都使用自动递增的id时,有什么方法可以避免id冲突吗?或者通过抵消起始id,或者更好的是让所有表使用共享序列? 模式是在

  • 我试图在Laravel中加入3个表后查看特定表的日期。但是它只显示一个表的信息。 下面是连接3个表的代码: 路由文件: 下面是查看刀片模板中信息的脚本 刀片中的代码: 这里我想查看发票的创建日期,但它显示了subscribers表中订户的创建日期。但我想从发票表中查看发票的具体日期。 我该怎么做?当做

  • 问题内容: 当Proguard重命名/重新打包类时,似乎并没有尝试避免与库JAR中的类命名冲突。这是正确的,还是我配置不正确? 我混淆了使用最新的Google AdMob SDK的Android应用程序。以前,我使用旧的AdMob SDK没问题。新的SDK JAR文件包含一些已被混淆的类。这些类之一在默认/未命名包中。当我混淆我的应用程序时,尽管将AdMob JAR作为库JAR读取(尽管它应该引起

  • 考虑这个例子,其中主应用程序是两个模块的消费者:一个提供电子邮件服务,另一个提供日志服务。 app/email/email.service.ts app/email/email.module.ts providers: [ EmailService ], }) export class EmailModule { } 电子邮件服务api需要一些由字符串api-config标识的配置设置,由DI