jQueryとprototype.jsを共存させる方法

Category
： Javascript

jQueryとPrototypeを共存させる方法

prototype.jsとjQueryは実は競合（コンフリクト）します。

今さら...って記事なのですが、自分の紹介しているjQueryのプラグインを導入したが動かない...
こういう質問がいくつか寄せられ、実際みてみた所、prototype.jsが使われていたりしていたので、今さらですが紹介しておきたいと思います。

jQueryとprototype.js共存させる為にする事

最初にprototype.jsを読み込ませます。
※prototype.jsで動かすプラグインも先に記述。
jQueryを読み込ませます。

jQueryの次に下記javascriptを記述

<script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>

最後にjQueryのプラグインを読みこます。
※この時プラグイン内に記述されている$() となっている部分を $j() に置換しないと駄目です。

jQueryでの開閉式のアコーディオンの動きいろいろで使ったスクリプトで例をあげてみると

変更前

$(document).ready(function() {
	$(".navi dt").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$(".navi dd").css("display","none");
	$(".navi dt").click(function(){
		$(this).next().slideToggle("fast");
		});
});

変更後

j$(document).ready(function() {
	j$(".navi dt").hover(function(){
		j$(this).css("cursor","pointer"); 
	},function(){
		j$(this).css("cursor","default"); 
		});
	j$(".navi dd").css("display","none");
	j$(".navi dt").click(function(){
		j$(this).next().slideToggle("fast");
		});
});

$をj$に一斉置換すれば良いかと思います。

最終的にhead内に記述内容をまとめてみますよ下記のようになります。

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript" src="js/accordion.js"></script>

これは個人的な意見なんですが、jQueryとprototype.jsを一緒に使うって事は極力避けた方がよいと思いますよ。

jQueryとprototype.jsを共存させる方法のデモページ

追記：2/20

cyokodogさんからもっと簡単に出来る方法を教えて貰いました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict()(function($){
var j$ = jQuery;
</script>
<script type="text/javascript" src="js/accordion.js"></script>

この記述ですとjQueryの$をj$に書き換えなくて大丈夫です。