jQuery逆引きリファレンス
異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。
別稿「TIPS：jQueryを他のライブラリと共存させるには？」で説明したjQuery.noConflictメソッドを利用すれば、異なるバージョンのjQueryを同一のページで共存させることもできます。本来、同一のページで複数バージョンのjQueryを混在させるのは避けるべきですが、以前のコード資産でどうしても古いバージョンのjQueryに依存せざるを得ないものが残っている場合のテクニックとして、本稿で解説しておきます。
例えば以下は、jQuery 1.4.1とjQuery 3.1.1とを共存させる例です。
|
<!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を共存させる場合には、複数の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で複数のバージョンをロードする方法を説明する。
70. 特定の要素を基点に別の要素を検索するには？（find）
findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明する。
