jQuery 3 の発表:17 の強力な新機能とその活用方法
jQuery が Web を揺るがし始めてから 10 年以上が経過しましたが、jQuery が存在し続けているのには正当な理由があります。 2015 年 7 月に、jQuery はバージョン 3.0 の最初のアルファ版を発表しました。これは久しぶりのメジャー アップデートです。 彼らはこれにほぼ 2 年間取り組んできました。新しいバージョンでは、下位互換性を念頭に置いて、よりスリムで高速な jQuery が約束されています。
現在のバージョン 3.1.1 多くのバグを修正し、新しいメソッドを追加し、いくつかの関数を削除し、いくつかの関数の動作を変更します。 追加された新機能とその使用方法を見てみましょう。
17.メソッドの非表示と表示
レスポンシブ デザインとの互換性を高めるために、jQuery 3 は多くの要素を非表示にするように機能強化されました。 54 個のサンプルに対して実行されたテストにより、新しいバージョンは以前のバージョンより 2% 高速であることがわかりました。
これに加えて、.hide()、.show()、および .toggle() メソッドは、計算されたスタイルではなくインライン スタイルに焦点を当てます。こうすることで、可能な限りスタイルシートの表示値をより適切に尊重できるようになります。つまり、CSS ルールは、ウィンドウのサイズ変更やデバイスの向きの変更などのイベントに応じて動的に変更できます。
<script>
$( "#showr" ).click(function() {
$( "div" ).first().show( "fast", function showNext() {
$( this ).next( "div" ).show( "fast", showNext );
});
});
$( "#hidr" ).click(function() {
$( "div" ).hide( 1000 );
});
</script>
読む:ウェブサイトにモダンな外観を与える 28 の素晴らしい CSS3 効果
16. WrapAll() 関数と Unwrap() 関数
jQuery 2 では、関数が渡されたとき、.wrapAll() メソッドは .wrap() と同様に動作しました。これは現在変更されています。 .wrapAll(function) はその関数を 1 回呼び出し、関数呼び出しの文字列結果を使用してコレクション全体をラップします。
jQuery( "div" ).wrapAll(function( /* No index argument, since the function would be executed only once */ ) {
// context is equal to the first found element
return "<h4></h4>";
}); jQuery 3 では、unwarp() メソッドにオプションのセレクター パラメーターがあります。メソッドの新しいシグネチャは次のとおりです。
unwrap([selector])
これにより、親要素内で照合するセレクター式を含む文字列を渡すことができます。一致するものがあれば、一致する子要素はラップ解除されますが、一致しない場合はラップされません。
15.考慮されるスクロールバーの幅/高さ
jQuery 2 では、$(window).width() を呼び出すと、コンテンツが要素のサイズを超える場合にブラウザが追加したスクロールバーを除く「コンテンツ幅」が返されます。 CSS メディア クエリと同等の測定を提供するために、$(window).outerWidth() と $(window).outerHeight() はスクロールバーの幅と高さを含む幅と高さを返すようになりました。これは、DOM プロパティ window.innerWidth と同等です。
14. data() の動作
jQuery 3 では、メソッドを Dataset API 仕様に合わせるために、data() メソッドの動作がわずかに変更されました。これで、すべてのプロパティのキーがキャメルケースに変換されます。
var $elem = $('#container');
$elem.data({
'custom-property': 'Hello World'
});
console.log($elem.data()); 古いバージョンを使用している場合は、コンソールに次の結果が表示されます。
{custom-property: "Hello World"} jQuery 3 では、次のものが得られます。
{customProperty: "Hello World"} ご覧のとおり、プロパティ名はダッシュなしのキャメルケースですが、古いバージョンでは小文字のままでダッシュが保持されていました。
13.クラス操作は SVG をサポート
jQuery はまだ SVG を完全にはサポートしていませんが、.hasClass() や .addClass() などの CSS クラス名を操作するメソッドを使用して、SVG ドキュメントをターゲットにすることができます。 SVG の jQuery を使用してクラスを変更（追加、切り替え、削除）または検索し、CSS を使用してクラスのスタイルを設定できます。
12.表示フィルタと非表示フィルタ
jQuery 3 では、:visible フィルターと :hidden フィルターの意味が変更されています。幅と高さがゼロのレイアウト ボックスを含むレイアウト ボックスがある場合、要素は :visible であるとみなされます。たとえば、コンテンツのない br 要素と inline 要素は、:visible フィルタによって選択されます。
次の HTML ページがある場合:
<section></section> <div></div> <br />
そしてステートメントを実行します。
console.log($('body :visible').length); jQuery 1 と 2 では結果は 0 になりますが、このバージョンでは結果は 3 になります。
11.幅と高さの丸めが不要になりました
jQuery は、ブラウザーがサポートしている場合、.width() と .height() の値を整数ではなく浮動小数点数で返すようになりました。ウェブページのデザインにサブピクセル精度を求めるユーザーにとって、これは朗報となるかもしれません。
たとえば、幅 100 ピクセルのコンテナ要素内に幅が 3 分の 1 (33.3333333%) の要素が 3 つある場合:
<div class="container"> <div>The car is </div> <div>black</div> <div>Audi</div> </div>
子要素の幅を取得しようとすると、次のようになります。
$('.container div').width(); より正確な結果である値 33.3333333 が得られます。
10.追加のセキュリティ層
クロスサイト スクリプティング (XSS) 攻撃に対して追加のセキュリティ層が統合されました。開発者は $.ajax() メソッドと $.get() メソッドのオプションで dataType:”script” を指定する必要があります。これにより、リモート サイトがスクリプト以外のコンテンツを配信しながら、さらに悪意のあるスクリプトを配信することを決定する攻撃の可能性を防ぎます。 jQuery.getScript() は dataType:”script” を明示的に設定するため、この変更の影響を受けません。
$.ajax({
accepts: {
mynewcustomtype: 'application/abc-some-custom-type'
},
// how to deserialize a `mynewcustomtype`
converters: {
'text mynewcustomtype': function(result) {
// do things
return newresult;
}
},
// Expect a `mynewcustomtype` back from server
dataType: 'mynewcustomtype'
}); 9.無効なハッシュ マーク
jQuery 3 は、セレクター文字列が jQuery(“#”) や .find(“#”) などのハッシュマークのみで構成されている場合、構文エラーをスローします。古いバージョンでは、$(“#”) は空のコレクションを返し、.find(“#”) はエラーをスローしました。
8.文字列をエスケープする新しいメソッド
新しい jQuery.escapeSelector() メソッドを使用すると、CSS セレクター内で特別な意味を持つ文字列または文字をエスケープできます。 ID またはクラス名に、セミコロンやドットなど、CSS で特別な意味を持つ文字が含まれている場合に便利です。
たとえば、ページ上の要素の ID が「abc.xyz」である場合、セレクターは ID が「abc」で、クラスが「xyz」である要素として解析されるため、$(「abc.xyz」) では選択できません。ただし、新しいメソッド $(“#” + $.escapeSelector(“abc.xyz”)) で選択できます。
7. jQuery.when() 引数
jQuery 3 では、then() メソッドを使用して入力引数を $.when() に追加すると、Promise 互換の「thenable」として解釈されます。これにより、Bluebird Promise や ES6 Promise を含む、より幅広い入力が可能になり、より洗練された非同期コールバックを作成できるようになります。
$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) {
alert (jqHXR.status); //alerts 200
});
複数引数の jQuery.when 呼び出しは Promise.all のように動作し、履行値を履行配列に集約するか、最初の拒否値で拒否します。単一引数とゼロ引数の呼び出しは Promise.resolve のように動作し、thenable と同じように解決される Deferred を返すか、非 Promise 入力で満たされます。
さらに、jQuery.when() メソッドは、入力 Deferred から出力 Deferred に進行状況通知を渡さなくなりました。
6. URL のハッシュは保持されます
jQuery.ajax() メソッドは、完全な URL をトランスポート (スクリプト、xhr、jsonp、またはカスタム トランスポート) に送信するようになりました。 URL にハッシュが存在する場合、そのハッシュは削除されなくなりました。ただし、接続の相手側のサーバーが URL のハッシュを処理できない場合は、リクエストを送信する前に手動で削除する必要があります。
5.遅延オブジェクトは JS Promise と互換性があります
Deferred は、コールバック キューの作成を可能にするチェーン可能なオブジェクトです。 jQuery 3 では、遅延オブジェクトが新しい Promises/A+ 標準と互換性を持つようになりました。 .then() メソッドに重要な変更があります。 .then() コールバック内でスローされた例外はすべてキャッチされ、拒否値に変換されるようになりました。拒否ハンドラーから返された非対応値は、フルフィルメント値に変わります。
古いスタイルの Deferred メソッド:
$.ajax("/stat")
.done(function(data) {
whoops();
// console displays: "whoops is not a function"
// no further execution
})
.fail(function(arg) {
// doesn't execute since the was not caught
}); 新しい標準の Promises/A+ 動作
$.ajax("/stat")
.then(function(data) {
whoops();
// console displays "jQuery.Deferred exception: whoops is not a function"
// no further execution
})
.catch(function(arg) {
// arg is an Error object - "whoops is not a function"
}); 4.アニメーション用の新しい API
jQuery 3 は、アニメーションの実行に requestAnimationFrame() API を使用します。この新しい API はアニメーションをよりスムーズかつ高速に実行し、消費する CPU 時間を削減します。それをサポートするブラウザでのみ使用されます。 Internet Explorer 9 などの古いブラウザの場合、jQuery は古い API をフォールバック メソッドとして使用します。
読む:デザイナーのための 24 の CSS3 および HTML5 アニメーション ツール
3. jQuery 3 は Strict モードで実行されます
jQuery 3 をサポートするブラウザのほとんどは strict モードを使用しており、新しいバージョンはこのディレクティブを念頭に置いて構築されています。 jQuery 3 は厳密モードで記述されていますが、コードを厳密モードで実行する必要はないため、現在のバージョンに移行する場合に既存のコードを書き直す必要はありません。ただし、例外が 1 つあります。ASP.net の一部のバージョンは、厳密モードのため互換性がありません。
doPostBack() メソッドでコールスタックのトレースを試みるためにarguments.caller.callee を使用する ASP.net 4.0 を実行している場合は、jQuery 2.x 以前のバージョンを使用し続けることをお勧めします。現在、ブラウザは error.stack を介したスタック トレースをサポートしているため、arguments.caller.callee を調べる必要はありません。
2. Get メソッドと Post メソッドの新しいシグネチャ
jQuery には、$.get() および $.post() ユーティリティ関数を $.ajax() に合わせるための新しいシグネチャがあります。新しい署名は設定パラメータです。
$.get([settings]) $.post([settings])
オブジェクト設定には多くのプロパティを含めることができます。これは、$.ajax() に提供できるオブジェクトと同じです。 $.ajax() ではなく $.get() と $.post() にオブジェクトを渡す場合の唯一の違いは、$.get() と $.post() には Ajax リクエスト (GET と POST) を実行するための事前設定された HTTP メソッドがあるため、メソッド プロパティが常に無視されることです。
コードを考えてみましょう。
$.get({
url: 'https://www.rankred.com',
method: 'POST' // property is ignored
}); メソッドのプロパティにもかかわらず、ステートメントは POST リクエストを送信せず、GET リクエストを送信します。
1. for…ループ
jQuery 3 は、ECMAScript 6 仕様で導入された for…of ループをサポートしています。これにより、Map、Set、Array などの反復可能なオブジェクトをループできます。このループを使用すると、取得される値は jQuery コレクションの DOM 要素であり、一度に 1 つずつ取得されます。
読む:ウェブサイトをより良くするための 26 の最新の jQuery プラグイン
for…of ループを使用すると、以前の $.each( ) 構文を置き換えることができ、jQuery コレクションの要素を簡単にループできるようになります。ページの各入力要素に名前を割り当てたいと仮定します。
jQuery 2 コードは次のようになります…
var $inputs = $('input');
for(var j = 0; j < $inputs.length; j++) {
$inputs[j].id = 'input - ' + j;
} jQuery 3 コードは次のようになります…
var $inputs = $('input');
var j = 0;
for(var input of $inputs) {
input.id = 'input - ' + j++;
} 産業技術