jQuery - noConflict() メソッド
jQuery - noConflict() メソッド
ページ上で jQuery と他のフレームワークを同時に使用するにはどうすればよいですか?
jQuery とその他の JavaScript フレームワーク
すでにご存知のとおり、jQuery は jQuery の短縮形として $ 記號を使用します。
他の JavaScript フレームワークでも $ 記號が省略表現(xiàn)として使用されたらどうなるでしょうか?
その他の JavaScript フレームワークには、MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman、Ext JS などがあります。
これらのフレームワークの一部では、(jQuery と同様に) $ 記號を省略記號として使用します。同じ省略記號を使用している 2 つの異なるフレームワークを使用している場合、スクリプトの実行が停止する可能性があります。
jQuery チームはこの問題を考慮し、noConflict() メソッドを?qū)g裝しました。
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("恭喜發(fā)財！");
});
});
</script>
</head>
<body>
<p>我要變身了！</p>
<button>點我有驚喜哦</button>
</body>
</html>獨自の省略形を作成することもできます。 noConflict() は、後で使用するために変數(shù)に保存できる 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("哪來這么多驚喜，好好學(xué)習(xí)了！");
});
});
</script>
</head>
<body>
<p>我要變身了！</p>
<button>點我有驚喜哦</button>
</body>
</html>jQuery コード ブロックで $ 省略表現(xiàn)が使用されており、このショートカットを変更したくない場合は、$ 記號を変數(shù)として ready メソッドに渡すことができます。この方法では、関數(shù)內(nèi)で $ 記號を使用できますが、関數(shù)の外では引き続き「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("學(xué)習(xí)要努力，持之以恒！");
});
});
</script>
</head>
<body>
<p>真的有驚喜，試試</p>
<button>點我點我</button>
</body>
</html>
