【jQuery.noConflict】ページ内で複数のjQueryを共存させる

jQueryのバージョンによってプラグインがうまくいったり動かなかったりということもあると思います。

そんなときに同じページ内で複数のjQueryを共存させたいというときがあると思います。

通常はjQueryを複数読み込むと最後のものが優先されます。

ですがこのjQueryのバージョンのときにはこの処理を動かしたい。

また別のjQueryのバージョンのときにはこの処理を実行したいというように使い分けたいときには
noConflictを使うことで実現できます。

ページ内で複数のjQueryを共存させる方法

noConflict

まずは読み込ませたいjQueryを記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>       
<script type="text/javascript">
        var $111 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

上記だと「$111」のなかには1.11.1のjQueryが入り「jQuery」には3.5.1のjQueryが入ります。

読み込まれたjQueryを使い分けたいときには下記のように記述します。

1.11.1のjQueryを実行させたいとき

たとえば1.11.1のjQueryを使いたい場合にはこう書きます。

(function($){
        処理
})($111)

次はbxsliderなどのスライダー系のプラグインをjQuery1.11.1で動かしたいときになります。

$111(div).bxSlider({
        スライダーの処理        
});

最後に

このようにjQueryのバージョンを使い分けることによって実現できることもあります。

使うことはそれほど多くはないと思いますが知っておくことでいざそのようなことが起こったときに対応することができます。