jQuery日本語リファレンス

prototype.jsと同時に使うには

日本でも人気の高いprototype.jsのようなライブラリを、既に用いてサイト構築をしている人も多いかと思います。
しかし、新たにjQueryも試してみたい。あるいはjQueryで作られたライブラリを導入してみたい...というような場合、最も問題になるのは「$」関数の扱いです。

prototype.jsにおいて、$は"document.getElementById"に代わるもので、非常によく使われます。
一方でjQueryでは核であるjQueryオブジェクトのことで、これを使わずにjQueryのコードを書くことは、ほぼ無いでしょう。

これらを共存させるには、jQueryの"noConflict"を使います。

全ての箇所で$をprototype.jsの動作をさせる場合

次のように記述します。

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script><!--
jQuery.noConflict();
jQuery(document).ready(function(){
	// ここでは、$はprototypeの動作をします。
	// jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。
});
//--></script>

[実行]
まず両方のライブラリを取り込まなければいけませんが、呼び出し順を必ずjQueryが後になるようにして下さい。

<script src="prototype.js"></script>
<script src="jquery.js"></script>

次にjQuery.noConflict()を呼び出しますが、これ以降、$は全てprototype.jsの動作(つまり、jquery.jsが読み込まれる前の動作)を踏襲するようになります。

ready内ではjQueryの動作をさせる場合

しかし、$が完全にprototypeの動作になってしまうのは、jQueryの既にあるコードを利用したい場合などには不都合が起きます。
これからjQueryをメインに開発していく場合にも、コードが非常に迂遠なものになってしまうでしょう。
(jQueryを別の名前(jqなど)にする方法もありますが)

jQueryは通常、document.ready()のクロージャ内にコードを記述します。
この中においては$を通常のjQueryオブジェクトとして動作させ、このスコープの外ではprototype.jsのものとして動かす方法もあります。

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

[実行]

いずれの方法でも$の衝突は回避できますが、例えばprototype.js内で上書きされた様々な組み込みオブジェクトのprototypeは、いずれにしろ元には戻りません。
完全にコンフリクトを避けることは出来ませんが、多くの場合は問題なく使えると思います。