JQuery的$和其它JS发生冲突的快速解决方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery的$和其它JS发生冲突的快速解决方法相关的知识,希望对你有一定的参考价值。

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。

然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文:

我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点

举例:

方法一:

代码如下:

<script type="text/javascript"> 
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 
jQuery(function(){ //使用jQuery 
jQuery("p").click(function(){ 
alert( jQuery(this).text() ); 
}); 
}); 
$("pp").style.display = ‘none‘; //使用prototype 
</script> 


方法二:

 

我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点

代码如下:

<script type="text/javascript"> 
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式 
$j(function(){ //使用jQuery 
$j("p").click(function(){ 
alert( $j(this).text() ); 
}); 
}); 
$("pp").style.display = ‘none‘; //使用prototype 
</script> 


还有其它的方法,都给大家列举出来,同理都可以看明白了吧,呵呵。

 

方法三:

代码如下:

<script type="text/javascript"> 
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 
jQuery(function($){ //使用jQuery 
$("p").click(function(){ //继续使用 $ 方法 
alert( $(this).text() ); 
}); 
});  
$("pp").style.display = ‘none‘; //使用prototype 
</script> 


方法四:

代码如下:

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

 

 
 

以上是关于JQuery的$和其它JS发生冲突的快速解决方法的主要内容,如果未能解决你的问题,请参考以下文章

jquery和其他js库起冲突的解决方法

discuz教程:discuz模板js与jQuery冲突的解决方案

JavaScript自执行函数和jquery扩展方法

jQuery版本冲突

ECSHOP中transport.js和jquery的冲突的简单解决办法

layui与jquery冲突导致下拉框无法显示的解决方法