首页 > web前端 > js教程 > 正文

使用jquery.noConflict()解决jquery库与其他库冲突的问题

巴扎黑
发布: 2017-06-20 15:16:58
原创
1802 人浏览过

在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突;若是发生冲突后,可以通过以下几种方案进行解决:
一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:









test---prototype


test---jQuery



二、jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
       jQuery("p").click(function(){
              alert( jQuery(this).text() );
       });
});
$("pp").style.display = &#39;none&#39;; //使用prototype
</script>
//代码二
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
       $j("p").click(function(){
       alert( $j(this).text() );
       });
});
$("pp").style.display = &#39;none&#39;; //使用prototype
</script>
//代码三
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
       $("p").click(function(){ //继续使用 $ 方法
       alert( $(this).text() );
       });
});
$("pp").style.display = &#39;none&#39;; //使用prototype
</script>
//代码四
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
       $(function(){ //匿名函数内部的$均为jQuery
              $("p").click(function(){ //继续使用 $ 方法
                     alert($(this).text());
              });
       });
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = &#39;none&#39;; //使用prototype
/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去 
       jQuery.noConflict(); 
});
</script>
登录后复制

以上是使用jquery.noConflict()解决jquery库与其他库冲突的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板