Home  >  Article  >  Web Front-end  >  Use jquery.noConflict() to solve the problem of conflicts between jquery library and other libraries

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

巴扎黑
巴扎黑Original
2017-06-20 15:16:581753browse

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:
100db36a723c770d327fc0aef2ce13b1
a50681aca8d1c1449d41ea0b97da151e
f9a528e858ac01d244e7098535bba7dd
4b58d73188ae8dcd27d2649e45727ee72cacc6d41bbb37262a98f745aa00fbf0
620f7eacaec795f0afa04e23ff75ad57
7d81a9f80b41381324ea48378153a79f2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
6bb5bdaff7b7e76368797a21c93cf2a5test---prototype94b3e26ee717c64999d7867364b1b4a3
05ff9a9e18a7aecf8acff32163179ec7test---jQuery94b3e26ee717c64999d7867364b1b4a3

< ;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
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn