jQueryのバージョンを複数同時に使用する方法

Number Please By: Kool Cats Photography over 3 Million Views
jQueryには多くのプラグインが存在し、Webページを作成では欠かせないものになって来ています。しかしプラグインごとに利用可能なjQueryのバージョンが異なるため、プラグインが動かない場合が多々有ります。
そのため、jQueryには複数のバージョンを同時に使用してもコンフリクト(conflict)が起こらないようにする「noConflict()」というメソッドが用意されました。
今回はこの「noConflict()」を使用して複数のバージョンを同時に使用する方法を紹介します。
jQueryのバージョンを確認する方法
現在使用しているjQueryのバージョンは以下のコードで確認できます。
$.fn.jquery
例えば、このようにjQuery2.0.3を使用した場合は「2.0.3」と値が返ってきます。
<script type="text/javascript" src="jquery-2.0.3.min.js"> </script> <script type="text/javascript"> (function($){ $(function(){ console.info("jQuery = " + $.fn.jquery); }); })(jQuery); </script>

複数のバージョンを読み込ませたときの優先順位
複数のjQueryを読み込ませたときに、どのjQueryが優先されるのか確認してみます。
例えば「2.0.3」と「1.4.3」を同時に読み込ませた場合、後に読み込ませた「1.4.3」が優先されます。このようにjQueryは後出し優先、最後に読み込ませたjQueryのバージョンが優先されます。
<script type="text/javascript" src="jquery-2.0.3.min.js"> </script> <script type="text/javascript" src="jquery-1.4.3.min.js."> </script> <script type="text/javascript"> (function($){ $(function(){ console.info("jQuery = " + $.fn.jquery); }); })(jQuery); </script>

複数のjQueryを同時に使用する方法
jQueryは最後に読み込ませたバージョンが優先されるため、複数のバージョンを利用するときにはこのように「noConflict()」を利用します。
優先されているバージョン(1.4.3)に使用されているjQueryのオブジェクト(“$” と”jQuery”)を新しく作成した「$143」置き換えてやることで、「jQuery」と「$」のオブジェクトはjQuery2.0.3が利用できるようになります。
<script type="text/javascript" src="jquery-2.0.3.min.js"> </script> <script type="text/javascript" src="jquery-1.4.3.min.js."> </script> <script type="text/javascript"> var $143 = $.noConflict(true); (function($){ $(function(){ console.info("jQuery = " + $.fn.jquery); }); })(jQuery); (function($){ $(function(){ console.info("$143 = " + $.fn.jquery); }); })($143); </script>

jQueryを3つ利用する場合も方法は同じです。
最優先の1.4.3を「$143」に置き換え、2番目に優先される1.11.2を「$1112」に置き換えます。これで「$」「jQuery」は2.0.3が使えるようになります。
<script type="text/javascript" src="jquery-2.0.3.min.js"> </script> <script type="text/javascript" src="jquery-1.11.2.min.js"> </script> <script type="text/javascript" src="jquery-1.4.3.min.js."> </script> <script type="text/javascript"> var $143 = $.noConflict(true); var $1112 = $.noConflict(true); (function($){ $(function(){ console.info("jQuery = " + $.fn.jquery); }); })(jQuery); (function($){ $(function(){ console.info("$1112 = " + $.fn.jquery); }); })($1112); (function($){ $(function(){ console.info("$143 = " + $.fn.jquery); }); })($143); </script>
Related Posts

« Tableのヘッダ固定を行うCSS & JQuery 【jQuery】animate関数の仕様と使い方 »
Trackback URL
http://webnonotes.com/javascript-2/jquery-noconflict/trackback/No Comments Yet