prototype.jsとJQueryを共存させるには

2011年4月5日

Ruby on Railsで開発していると、たいていの場合prototype.jsが組み込まれてしまう。

Rails3ではprototype.jsを使わない方法も取れるかもしれないが、まだまだprototype.jsは使う機会が多い。

そんな中で、JQueryのエフェクトやプラグインには魅力を感じてしまう。

そこで、prototype.jsとJQueryを共存させる事が出来れば問題は解決するはず。

JQueryには、コンフリクトを避けるためのメソッドがあるので、これを指定すれば

ほとんどの場合、エラーが出ずに共存させることが出来る。

まず、prototype.jsを読み込む

その次に、JQueryを読み込む

かならず、prototype.jsの次にJQueryを読み込む。

JQueryを読み込んだ直後に

jQuery.noConflict();

というメソッドを実行してやることで、共存できる。

このnoConflictも、直後に無いとIEなどでエラーが出たりする。

また、JQueryの方の呼び出し方が少し変わり

JQuery('def#content’)

という形で、$ではなく、JQueryと指定する必要がある。

JQueryの処理が長く、JQueryと書くのが面倒な場合

JQuery用のスコープとして、以下のような書き方も可能

<script><!--
jQuery(document).ready(function($){
	// ここでは「$」はjQueryとして使えます
});
// ここでは「$」はprototype.jsの動作をします
//-->
</script>

AJAX

Posted by GENDOSU