當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

JQuery jQuery.noConflict()用法及代碼示例

用法 
jQuery.noConflict(  [removeAll ] ) => Object

說明：放棄 jQuery 對$多變的。

  • 添加的版本：1.0jQuery.noConflict( [removeAll ] )

    • removeAll
      類型：Boolean
      一個布爾值，指示是否從全局範圍(包括 jQuery 本身)中刪除所有 jQuery 變量。

許多 JavaScript 庫使用 $ 作為函數或變量名，就像 jQuery 一樣。在 jQuery 的情況下，$ 隻是 jQuery 的別名，因此所有函數都可以在不使用 $ 的情況下使用。如果您需要在 jQuery 旁邊使用另一個 JavaScript 庫，請通過調用 $.noConflict() 將 $ 的控製權返回給另一個庫。 $ 的舊引用在 jQuery 初始化期間被保存； noConflict() 隻是恢複它們。

如果由於某種原因加載了兩個版本的 jQuery(不推薦)，從第二個版本調用 $.noConflict( true ) 會將全局範圍的 jQuery 變量返回到第一個版本的變量。

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

這種技術與 .ready() 方法對 jQuery 對象的別名能力結合起來特別有效，因為在傳遞給 .ready() 的回調中，如果您願意，可以使用 $，而不必擔心以後發生衝突：

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

如有必要，您也可以通過將 true 作為參數傳遞給方法來釋放 jQuery 名稱。這很少需要，如果必須這樣做(例如，如果需要在同一頁麵上使用多個版本的 jQuery 庫)，則需要考慮大多數 plug-ins 依賴於 jQuery 的存在變量，在這種情況下可能無法正常運行。

例子：

將 $引用的原始對象映射回 $。

jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

恢複 $別名，然後創建並執行一個函數，以在函數範圍內將 $作為 jQuery 別名提供。在函數內部，原始 $對象不可用。這適用於大多數不依賴任何其他庫的插件。

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);
 
// Other code using $ as an alias to the other library

創建一個不同的別名而不是 jQuery 以在腳本的其餘部分中使用。

var j = jQuery.noConflict();
 
// Do something with jQuery
j( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";

將 jQuery 完全移動到另一個對象中的新命名空間。

var dom = {};
dom.query = jQuery.noConflict( true );

結果：

// Do something with the new jQuery
dom.query( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";
 
// Do something with another version of jQuery
jQuery( "div > p" ).hide();

加載兩個版本的 jQuery(不推薦)。然後，將 jQuery 的全局範圍變量恢複為第一個加載的 jQuery。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
 
<script>
var $log = $( "#log" );
 
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
 
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
 
jq162 = jQuery.noConflict( true );
 
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 jQuery.noConflict()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。