デモページはこちら

jQueryはバージョン1.9と3.0で大幅な仕様変更があり、jQuery Migrateはその仕様変更を補助するためのパッチです。jQuery 1系の最新版1.12.4までのパッチがjQuery Migrate 1系、jQuery 1.12.4から3系以降のパッチがjQuery Migrate 3系です。

jQuery Migrateには開発版と製品版があり、開発版はコードの問題をコンソールに表示しますが 製品版は表示しません。開発版は「jquery-migrate-3.3.1.js」のようにMinified化されていませが、製品版はコードが圧縮されて「jquery-migrate-3.3.1.min.js」のようにMinified化されています。そのためjQuery Migrateの開発版と製品版はファイル名で判別できます。

jQueryバージョンアップ時のデバッグには開発版を、コードを修正しきれず復元された機能をやむをえず使う場合は製品版を選択します。

以下のhtmlの構造でテストします。

<ul>
	<li>jQuery Migrate読み込み無し</a></li>
	<li><a href="index2.html">jquery-migrate-3.3.1.js（開発版）</a></li>
	<li><a href="index3.html">jquery-migrate-3.3.1.min.js（製品版）</a></li>
</ul>
<input type="button" value="button01">
<input type="button" value="button02">
<input type="button" value="button03">
<input type="button" value="button04">
<input type="button" value="button05">

jQueryではinput type="button"の要素全てにクラス名check-btnを付与し、CSSでボタンのグラデーションを変更します。ただしinput type="button"要素の存在チェックでjQuery 3系では廃止になったsizeメソッドを使用しています。jQueryはバージョン3.3.1を使用しているため、jQuery Migrateの読み込みがないhtmlではエラーになりjQueryが動作しません。それに対しjQuery Migrateの読み込みがあるhtmlではjQueryが動作します。

$(function() {
	if($("input[type='button']").size()){
		$("input[type='button']").each(function() {
			$(this).addClass('check-btn');
		});
	}
});