jQuery noConflict() メソッド
jQuery - noConflict() メソッド
ページ上で jQuery と他のフレームワークを同時に使用するにはどうすればよいですか?
jQuery とその他の JavaScript フレームワーク
すでにご存知のとおり、jQuery は jQuery の短縮形として $ 記号を使用します。
他の JavaScript フレームワークでも $ 記号を省略表現として使用するとどうなるでしょうか?
その他の JavaScript フレームワークには、MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman、Ext JS などがあります。
これらのフレームワークの一部では、(jQuery と同様に) $ 記号を省略記号として使用します。同じ省略記号を使用している 2 つの異なるフレームワークを使用している場合、スクリプトの実行が停止する可能性があります。
jQuery チームはこの問題を考慮し、noConflict() メソッドを実装しました。
jQuery noConflict() メソッド
noConflict() メソッドは $ 識別子の制御を解放し、他のスクリプトが $ 識別子を使用できるようにします。
もちろん、略語を完全な名前に置き換えることで、jQuery を使用することもできます:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください
独自の略語を作成することもできます。 noConflict() は、後で使用するために変数に保存できる jQuery への参照を返します。この例を参照してください:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
var jq=$.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
jQuery コードブロックが $ ショートカットを使用していて、それを使用したくない場合このショートカットを変更すると、$ 記号を変数として ready メソッドに渡すことができます。この方法では、関数内で $ 記号を使用できますが、関数の外では引き続き「jQuery」を使用する必要があります:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>例の実行»
「例の実行」ボタンをクリックしますオンラインの例を見るには
