jQuery逆引きリファレンス

jQuery逆引きリファレンス

異なるバージョンのjQueryを共存させるには?(jQuery.noConflict)

2017年4月6日

jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:jQueryを他のライブラリと共存させるには?」で説明したjQuery.noConflictメソッドを利用すれば、異なるバージョンのjQueryを同一のページで共存させることもできます。本来、同一のページで複数バージョンのjQueryを混在させるのは避けるべきですが、以前のコード資産でどうしても古いバージョンのjQueryに依存せざるを得ないものが残っている場合のテクニックとして、本稿で解説しておきます。

 例えば以下は、jQuery 1.4.1とjQuery 3.1.1とを共存させる例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// 1jQuery 3.1.1に対してエイリアスを設定
var $j = jQuery.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
// 2jQueryのバージョンを確認
console.log($j.fn.jquery); // 結果:3.1.1
console.log($.fn.jquery); // 結果:1.4.1
console.log(jQuery.fn.jquery); // 結果:1.4.1
</script>
</body>
</html>
jQueryの異なるバージョンを共存させる例(noConflict.html)

 複数のjQueryを共存させる場合には、複数のjQueryインポートの間で、jQuery.conflict(true) メソッドを呼び出してください(1)。これによって、先行するjQuery(ここでは3.1.1)の名前jQuery$が無効になります。

 あとは$jQuery$j(エイリアス)で、それぞれjQueryのバージョンを確認してみましょう(2)。確かにjQuery 3.1.1が$jに、残る$jQueryがjQuery 1.4.1に割り当てられていることが確認できます。

 jQueryのバージョンを確認する方法については、別稿「TIPS:現在利用しているjQueryのバージョンを確認するには?」も参照してください。

処理対象:ライブラリの共存 カテゴリ:コア
API:jQuery.noConflict() カテゴリ:Core(コア) |その他(Miscellaneous)> セットアップメソッド(Setup Methods)
API:$.fn.jqueryプロパティ カテゴリ:Internals(内部)|Properties(プロパティ) > Properties of jQuery Object Instances(jQueryオブジェクトインスタンスのプロパティ)

※以下では、本稿の前後を合わせて5回分(第66回~第70回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

66. 特定のAjax通信でのみグローバルイベントを無効化するには?($.ajax[global])

Ajax通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。

67. jQueryを他のライブラリと共存させるには?(jQuery.noConflict)

他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。

68. 【現在、表示中】≫ 異なるバージョンのjQueryを共存させるには?(jQuery.noConflict)

jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。

69. 要素セットを指定の条件で絞り込むには?(filter)

filterメソッドを使って、jQueryオブジェクトで保持している現在の要素セットを、指定された条件で絞り込む方法を説明する。

70. 特定の要素を基点に別の要素を検索するには?(find)

findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明する。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!