手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery的$和其它JS发生冲突的快速解决方法
JQuery的$和其它JS发生冲突的快速解决方法
摘要:众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点。然后...

众所周知,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对字符串编码的几种方式使用

jQuery判断一个元素是否可见的方法

JQuery中上下文选择器实现方法

JQuery+CSS实现图片上放置按钮的方法

jquery任意位置浮动固定层插件用法实例

创建你的第一个AngularJS应用的方法

AngularJS身份验证的方法

jquery简单实现外部链接用新窗口打开的方法

jQuery实现不断闪烁文字的方法

精品推荐
分类导航