jQuery学习笔记之解决jQuery和其他库的冲突

解决jQuery和其他库的冲突,分两种情况:

情况一:

jQuery库在其他库之后导入,两种解决方案:

方案1、在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他库。

<html>
<head></head>
<body>
<p id="pp">test---prototype<p>
<p> test----jQuery<p>
<!--引入prototype-->
<script src="prototype-1.6.0.3.js"  type="text/javascript"></script>
<!--引入jQuery-->
<script src="scripts/jquery-1.4.js" type="text/javascript"></script>
<script language="javascript">
jQuery.noConflict()://将变量$的控制权移交给prototype.js
jQuery(function(){
jQuery(“p”).click(fucntion(){
alert(jQuery(this).text());
})
})
$("pp").style.display = 'none';
</script>
<body>
</html>

 然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。

 

方案2、如果想确保jQuery不会与其他库冲突,又想自定义一个快捷方式,可进行如下操作

//...省略代码

var $j = jQuery.noConflict();//自定义一个快捷方式
$j(fucntion(){ //使用jQuery,利用自定义快捷方式——$j
$j("p").click(function(){
alert($j(this.text());
})
})
$("pp").style.diaplay= 'none';

//...省略代码
 

如果不想给jQuery自定义这些备用名称,还想使用$而不管其他库的$()方法,同时又不想与其他库相冲突,有以下两种解决方法

方法一:

//...省略代码

jQuery.noConflict()://将变量$的控制权让渡给prototype
jQuery(function($){//使用jQuery设定页面加载时执行的函数
$("p").click(fucntion(){//在函数内部继续使用$()方法
alert($(this).text());
})
})

$("pp").style.display = 'none';//使用prototype

//...省略代码

 

方法二:

//...省略代码

jQuery.noConflict();//将变量$的控制权让渡给prototype.js
(fucntion($){//定义匿名函数并设置形参为$
$(function(){//匿名函数内部的$均为jQuery
$("p").click(function(){//继续使用$()方法
alert($(this).text);
})
});
})(jQuery);//执行匿名函数且传递实参jQuery
$("pp").style.display = 'none';//使用prototype

//...省略代码

 

 

情况二:

jQuery库在其他库之前导入

如果jQuery库在其他库之间就导入了,那么可以直接"jQuery"来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。无需调用jQuery.noConflict()函数。

<html>
<head></head>
<body>
< p id="pp">test----prototype<p>
<p>test----jQuery<p>
<!--先导入jQuery-->
<script src="scripts/jquery-1.4.js" type="text/javascript"></script>
<script language="javascript">
jQuery(fucntion(){//直接使用jQuery,无需调用"jQuery.noConflict()"函数
jQuery("p").click(function(){
alert(jQuery(this).text);
})
})
$("pp").style.diaplay = 'none';//使用prototype
</script>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值