欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-07 19:24:18
众所周知,jquery是目前最流行的js封装包,简化了很多复杂的js程序,jquery讲dom树定义为$,通过$来获取各个子节点。 然后,js插件并非只有jquery,还有pro...

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