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("恭喜发财！");
  });
});
</script>
</head>
<body>
<p>我要变身了！</p>
<button>点我有惊喜哦</button>
</body>
</html>

独自の省略形を作成することもできます。 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>
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("哪来这么多惊喜，好好学习了！");
  });
});
</script>
</head>
<body>
<p>我要变身了！</p>
<button>点我有惊喜哦</button>
</body>
</html>

jQuery コードブロックで $ 省略表現が使用されており、このショートカットを変更したくない場合は、$ 記号を変数として ready メソッドに渡すことができます。この方法では、関数内で $ 記号を使用できますが、関数の外では引き続き「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($){
  $("button").click(function(){
    $("p").text("学习要努力，持之以恒！");
  });
});
</script>
</head>
<body>
<p>真的有惊喜，试试</p>
<button>点我点我</button>
</body>
</html>

学び続ける

新しいファイル

<!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("恭喜发财！"); }); }); </script> </head> <body> <p>我要变身了！</p> <button>点我有惊喜哦</button> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear