软件开发培训班 >> 编程开发 >> JavaScript


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

　　本文标签：JQuery,冲突

众所周知，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>