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は、いずれにしろ元には戻りません。
完全にコンフリクトを避けることは出来ませんが、多くの場合は問題なく使えると思います。