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

Number Please By: Kool Cats Photography over 3 Million Views

jQueryには多くのプラグインが存在し、Webページを作成では欠かせないものになって来ています。しかしプラグインごとに利用可能なjQueryのバージョンが異なるため、プラグインが動かない場合が多々有ります。

そのため、jQueryには複数のバージョンを同時に使用してもコンフリクト(conflict)が起こらないようにする「noConflict()」というメソッドが用意されました。

今回はこの「noConflict()」を使用して複数のバージョンを同時に使用する方法を紹介します。

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

jQueryのバージョンを確認する方法
複数のバージョンを読み込ませたときの優先順位
複数のjQueryを同時に使用する方法

jQueryのバージョンを確認する方法

現在使用しているjQueryのバージョンは以下のコードで確認できます。

$.fn.jquery

例えば、このようにjQuery2.0.3を使用した場合は「2.0.3」と値が返ってきます。

Source

<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のバージョンが優先されます。

Source

<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が利用できるようになります。

Source

<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が使えるようになります。

Source

<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>

jQuery4