PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

巴扎黑
巴扎黑 原创
2017-06-20 15:16:58 1478浏览

在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突;若是发生冲突后,可以通过以下几种方案进行解决:
一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
9317ed868ece2cd4e4dc85851b15638c
289e31492f2b29cba3182e30f900867a
751d9a83031dd787141338558f7614b02cacc6d41bbb37262a98f745aa00fbf0
3799b8d2e03854c59d147db84ece871b
693e2f038ba25c40e99b36b45b43f0fa2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e3e01976a556265a44cb4173897b4355test---prototype94b3e26ee717c64999d7867364b1b4a3
05ff9a9e18a7aecf8acff32163179ec7test---jQuery94b3e26ee717c64999d7867364b1b4a3

5cd6e472395e766622bc5d31b556eb7a
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数
jQuery("p").click(function(){
       alert( jQuery(this).text() );
});
});

$("pp").style.display = 'none'; //使用prototype
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

二、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 = 'none'; //使用prototype
</script>
//代码二
<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
/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去 
       jQuery.noConflict(); 
});
</script>

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。