jQueryコンフリクト対策

他ライブラリとの併用時の衝突回避方法

jQuery

jQuery

jQuery.noConflict(); jQuery(function () { // jQuery処理 jQuery('body').append('Hello World'); }); // 他コード処理

スコープ

jQuery

jQuery.noConflict(); (function($) { $(function () { // jQuery処理 $('body').append('Hello World'); }); })(jQuery); // 他コード処理

エイリアス

jQuery

var j = jQuery.noConflict(); j(function () { // jQuery処理 j('body').append('Hello World'); }); // 他コード処理

オブジェクト

jQuery

var dom = {}; dom.query = jQuery.noConflict(true); dom.query(function () { // jQuery処理 dom.query('body').append('Hello World'); }); // 他コード処理

異なるバージョンのjQueryを使う。

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> <script src="https://code.jquery.com/jquery-1.12.3.js"></script> <script> // バージョン $(function () { // 2.2.3 console.log($.fn.jquery); }); var j = jQuery.noConflict(); j(function () { // 1.12.3 console.log(j.fn.jquery); }); $(function () { // 2.2.3 console.log($.fn.jquery); }); </script>

1つしかjQueryを読み込んでいないのに、コンフリクト回避を行うとエラーが発生する。

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> <script> // TypeError: $ is undefined $(function () { console.log($.fn.jquery); }); var j = jQuery.noConflict(); j(function () { console.log(j.fn.jquery); }); </script>

1つでも2つでもエラーを発生させない。

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> <script src="https://code.jquery.com/jquery-1.12.3.js"></script> <script> ;(function($) { $(function () { // 1.12.3 console.log($.fn.jquery); }); })(jQuery); </script>

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> <script> ;(function($) { $(function () { // 2.2.3 console.log($.fn.jquery); }); })(jQuery); </script>

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。