JQuery的$和其它JS发生冲突的快速解决方法
更新时间：2014年01月24日 08:58:11 作者：
本篇文章主要是对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实现对一个表格动态的添加行，删除行，并且对表格中内容进行非空验证的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
在提交表单前、焦点转移后或者 keyup 时往往需要对输入的文本就行检验，如果输入内容不符合相关约定则要进行提示或警告，有一个叫 jCallout 的插件可以轻松实现该功能，该插件基于 jQuery 使用，所以使用前需要添加引用 jQuery2013-09-09
jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。2010-06-06
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
这篇文章主要介绍了详解Jquery 遍历数组之$().each方法与$.each()方法介绍 ,具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
ajax联动框想必大家早有所耳闻，接下来本文详细介绍下使用jquery实现的原理及代码，感兴趣的你可以参考下，或许对你有所帮助2013-03-03
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
这篇文章主要介绍了使用jQuery+EasyUI实现CheckBoxTree的级联选中特效的相关资料,需要的朋友可以参考下2015-12-12
如果您不希望下载并存放jQuery，那么也可以通过 CDN（内容分发网络）引用它，下面是具体实现，有类似需求的各位可以参考下哈，希望对你有所帮助2013-05-05
bootstrap与Jquery UI 按钮样式冲突的解决办法
这篇文章主要介绍了bootstrap与Jquery UI 按钮样式冲突的解决办法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jquery与js实现全选功能的区别,需要的朋友可以参考下2017-06-06
最新评论