Use jquery.noConflict() to solve the problem of conflicts between jquery library and other libraries-JS Tutorial-php.cn

Use jquery.noConflict() to solve the problem of conflicts between jquery library and other libraries

巴扎黑

Release： 2017-06-20 15:16:58

Original

1870 people have browsed it

When developing using jQuery, you may also use other JS libraries, such as Prototype, but conflicts may occur when multiple libraries coexist; if conflicts occur, you can use the following solutions To solve:
1. Import the jQuery library before other libraries and directly use the jQuery (callback) method such as:

test---prototype

test---jQuery

< ;script type="text/javascript">
jQuery(function(){ //Use jQuery directly, there is no need to call "jQuery.noConflict()"Function.
jQuery(" p").click(function(){
alert( jQuery(this).text() );
});
});

$("pp"). style.display = 'none'; //Use prototype

2. The jQuery library is imported after other libraries, and the jQuery.noConflict() method is used to transfer control of the variable $ to other libraries. There are several ways:

<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>

Copy after login

The above is the detailed content of Use jquery.noConflict() to solve the problem of conflicts between jquery library and other libraries. For more information, please follow other related articles on the PHP Chinese website!