jQuery.noConflict() 方法—— jquery庫與其他庫衝突的問題解決

weixin_33912246發表於2019-01-08
jQuery

在使用jQuery開發的時候，可能還會使用到其他的JS庫，比如Prototype，但多庫共存時可能會發生衝突；若是發生衝突後，可以通過jQuery.noConflict()  方法進行解決

定義和用法

noConflict() 方法讓渡變數 $ 的 jQuery 控制權。

該方法釋放 jQuery 對 $ 變數的控制。

該方法也可用於為 jQuery 變數規定新的自定義名稱。

提示：在其他 JavaScript 庫為其函式使用 $ 時，該方法很有用。

語法

jQuery.noConflict(removeAll)
引數描述
removeAll 布林值。指示是否允許徹底將 jQuery 變數還原。

說明

許多 JavaScript 庫使用 $ 作為函式或變數名，jQuery 也一樣。在 jQuery 中，$ 僅僅是 jQuery 的別名，因此即使不使用 $ 也能保證所有功能性。假如我們需要使用 jQuery 之外的另一 JavaScript 庫，我們可以通過呼叫 $.noConflict() 向該庫返回控制權：

一、 jQuery庫在其他庫之前匯入，直接使用jQuery(callback)方法：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先匯入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--後匯入其他庫 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){        //直接使用 jQuery ,沒有必要呼叫"jQuery.noConflict()"函式。
　　jQuery("p").click(function(){ 
       alert( jQuery(this).text() );
 　});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

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

 

相關文章