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>