1画面内でバージョンの異なるjQueryを共存させるには

あんまり同じような問題に直面している人は少ないとは思いますが。。。

まず、普通にjQueryを2個呼んでみます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

このようにした場合、jQueryのグローバルオブジェクトである「$」または「jQuery」は後勝ちになるので、alert($().jquery)とかやると1.9.0が表示されます。1.3.2のjQueryオブジェクトは上書かれて消えてしまっています。

ではどうするかというとnoConflictを使います。prototype.jsと同居するときによく使いますね。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    var $132 = $.noConflict(true);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

noConflictの引数にtrueを指定することでjQueryオブジェクトを完全に別名で書き換えることができます。

参考：jQuery.noConflict(extreme) - jQuery 日本語リファレンス

上記のコードを例に取ると、「$132」は1.3.2のjQueryオブジェクトが、「$」「jQuery」は1.9.0のjQueryオブジェクトが入っています。

これで同居できるようになりました。

もう一歩進んで、この状態から1.3.2でしか使えないライブラリと1.9.0でしか使えないライブラリを同時に使いたい場合について。

この場合は、ライブラリ内のjQueryオブジェクトを$132で全置換してしまえば動くようになります。
が、非常に手間がかかるのでおすすめしません。この場合はクロージャを使うとスマートです。

ライブラリを開いて以下のコードを追加します。

(function($){
    // ライブラリ本体のjavascript・・・
})($132)

こうすることで、ライブラリ内のみ「$」は「$132」を見るようになります。
たまにライブラリ内で「$」と「jQuery」が混ざって使われている場合があるので、どちらかに統一するようにライブラリを修正してください。