如何解决jQuery 和其他JS库的冲突
在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局对象都被很好地存储在jQuery命名空间里,因此当把jQuery和其他JavaScript库(例如Prototype、MooTools或YUI)一起使用时,不会引起冲突。
注意:默认情况下,jQuery用$作为自身的快捷方式。
1.jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下:
冲突解决1 Test-prototype(将被隐藏) Test-jQuery(将被绑定单击事件)
jQuery.noConflict();//将变量$的控制权让渡给prototype.js jQuery(function(){//使用jQuery jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $("pp").style.display='none';//使用prototype.js隐藏元素
然后,就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。
此外,还有另一种选择。如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:
var$j=jQuery.noConflict();//自定义一个比较短快捷方式 $j(function(){//使用jQuery $j("p").click(function(){ alert($j(this).text()); }); }); $("pp").style.display='none';//使用prototype.js隐藏元素
可以自定义备用名称,例如jq、$J、awesomequery等。
如果不想给jQuery自定义这些备用名称,还想使用$而不管其他库的$()方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。
其一:
jQuery.noConflict();//将变量$的控制权让渡给prototype.js jQuery(function($){//使用jQuery $("p").click(function(){//继续使用$方法 alert($(this).text()); }); }); $("pp").style.display='none';//使用prototype
其二:
jQuery.noConflict();//将变量$的控制权让渡给prototype.js (function($){//定义匿名函数并设置形参为$ $(function(){//匿名函数内部的$均为jQuery $("p").click(function(){//继续使用$方法 alert($(this).text()); }); }); })(jQuery);//执行匿名函数且传递实参jQuery $("pp").style.display='none';//使用prototype
这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性。
2.jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用"jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noconflict()函数。示例如下:
冲突解决5 Test-prototype(将被隐藏) Test-jQuery(将被绑定单击事件)
jQuery(function(){//直接使用jQuery,没有必要调用"jQuery.noConflict()"函数。 jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $("pp").style.display='none';//使用prototype
有了这些方法来解决冲突,就可以在项目中放心地引用jQuery了。
以上就是如何解决jQuery和其他JS库的冲突的详细内容,更多关于解决jQueryJS库冲突的资料请关注毛票票其它相关文章!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。