jQuery 核心 - noConflict() メソッド

jQuery 核心参考手册

インスタンス

noConflict() メソッドを使用して jQuery 変数に新しい名前を指定する：

var jq=$.noConflict();

実際に試してみてください

定義と用法

noConflict() メソッドは、変数 $ の jQuery 制御権を譲渡します。

このメソッドは、jQuery が $ 変数に対する制御を解放します。

このメソッドは、jQuery 変数に新しいカスタム名を指定するためにも使用できます。

ヒント：他の JavaScript ライブラリの関数に $ を使用する場合、このメソッドは非常に有用です。

文法

jQuery.noConflict(removeAll)
パラメータ 説明
removeAll ブール値。完全に jQuery 変数を元に戻すことを指示します。

説明

多くの JavaScript ライブラリでは $ を関数や変数名として使用しており、jQuery も同じです。jQueryでは、$ は単なるjQueryの別名であり、$ を使用しなくても全ての機能が保証されます。jQuery以外の別のJavaScriptライブラリを使用する必要がある場合、$.noConflict()を呼び出してそのライブラリに制御権を返すことができます：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // その他のライブラリの $ を使用するコード
</script>

これを .ready() メソッドと組み合わせて使用することで、jQuery オブジェクトに別名を設定することができます。この技術は非常に効果的です：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // jQueryの $ を使用するコード
  });
  // その他のライブラリの $ を使用するコード
</script>

さらに、このメソッドに true を渡すことで、$ と jQuery の制御権を元のライブラリに戻すことができます。使用する前によく考えてください！

これは単純な noConflict メソッドよりもさらに極端なバージョンであり、これは jQuery を完全に再定義します。これは通常、jQuery を非常に高度な衝突環境に埋め込むなどの極端な状況で使用されます。注意：このメソッドを呼び出した後は、プラグインが無効になる可能性があります。

インスタンス

例 1

$ 引用のオブジェクトを元のオブジェクトにマッピングします：

jQuery.noConflict();
jQuery("div p").hide();	// jQuery
$("content").style.display = "none";	// 他のライブラリの $()

例 2

エイリアス $ を復元し、関数を作成して実行します。この関数のスコープでは、$ は jQuery のエイリアスとしてまだ使用されます。この関数は、他のライブラリに依存しないプラグインには非常に効果的です：

jQuery.noConflict();
(function($) { 
  $(function() {
    // $ として jQuery エイリアスを使用するコード
  });
})(jQuery);
... // $ としてエイリアスを使用する他のライブラリのコード

例 3

jQuery.noConflict() を簡略化された ready と組み合わせることができます。これにより、コードがよりコンパクトになります：

jQuery.noConflict()(function(){
    // jQueryを使用するコード
});
... // 他のライブラリが $ をエイリアスとして使用するコード

例 4

新しいエイリアスを作成して、今後のライブラリで jQuery オブジェクトを使用する：

var j = jQuery.noConflict();
j("div p").hide();	// jQuery のコード
$("content").style.display = "none";	// 他のライブラリの $() コード

例 5

完全に jQuery を新しいネームスペースに移動する：

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

結果:

dom.query("div p").hide();	// 新しい jQuery のコード
$("content").style.display = "none";	// 另一个ライブラリの $() のコード
jQuery("div > p").hide();	// 另一个版本 jQuery 的コード

jQuery 核心参考手册