jQuery 3の新機能 - 10クールな機能
jQueryの新しいメジャーリリースであるjQuery 3.0がついにリリースされました。 Web開発者コミュニティは、2014年10月、jQueryチームが新しいメジャーバージョンの開発を開始した2016年6月から、この重要なステップを待っていました。 最終リリース 留守.
リリースノートは、 よりスリムで速い とjQuery、 後方互換性 念頭に置いて。この記事では、jQuery 3.0の新機能のいくつかを見て、JavaScriptのランドスケープがどのように変わるのかについて概要を説明します。.
どこから始めれば
jQuery 3.0をダウンロードして試してみたい場合は、ダウンロードページに直接アクセスしてください。アップグレードガイドやソースコードを見てみる価値もあります.
既存のプロジェクトがjQuery 3.0でどのように機能するかをテストしたい場合は、コードの互換性の問題を特定するjQuery Migrateプラグインを試してみることができます。また、将来のマイルストーンを覗くこともできます.
この記事はカバーしていません すべて jQuery 3.0の新機能、よりおもしろいものだけ：コード品質の向上、新しいECMAScript 6機能の統合、アニメーションのための新しいAPI、文字列をエスケープするための新しい方法、SVGサポートの向上、非同期コールバックの改善、レスポンシブサイトとのより良い互換性そしてセキュリティの向上.
1.削除された古いIEの回避策
新しいメジャーリリースの主な目的の1つは、それを作ることでした。 速くてなめらか, したがって、IE9に関連する古いハックと回避策- 削除されました. つまり、IE6-8をサポートしたい、またはサポートする必要があるなら、最新のものを使い続けなければなりません。 1.12 としても、リリース 2.x シリーズは古いInternet Explorer（IE9-）を完全にはサポートしていません。ドキュメントのブラウザサポートに関する注意事項を確認してください。.
またあることに注意してください 多くの廃止予定の機能 アップグレードガイドの大きな欠点は、廃止予定の機能（2016年6月現在）がグループ化されていないことです。そのため、興味がある場合は、ブラウザの検索ツールで検索する必要があります（ Ctrl + F）.
2. jQuery 3.0は厳密モードで動作します
jQuery 3でサポートされているほとんどのブラウザはstrictモードをサポートしているので、新しいメジャーリリースはこのディレクティブを念頭に置いて構築されています。.
jQuery 3は厳密モードで書かれていますが、それを知っておくことは重要です コードは厳密モードで実行する必要はありません。, そうあなた 書き換える必要はありません jQuery 3に移行する場合は、既存のjQueryコードを使用してください。厳密モードと非厳密モードのJavaScript 幸せに共存できる.
例外が1つあります。 ASP.NETのいくつかのバージョン 厳密モードのため、 jQuery 3と互換性がない. あなたがASP.NETに関わっているなら、あなたはここのドキュメントで詳細を見ることができます.
3.ループの...が紹介されています
jQuery 3はfor ... ofステートメントをサポートしています。 にとって ECMAScript 6で導入されたループです。 反復可能オブジェクトをループ処理する, 配列、マップ、セットなど.
jQueryでは、 の ループは前者を置き換えることができます $ .each（…） 構文であり、jQueryコレクションの要素をループしやすくなります。.
そのことに注意してください の ループする 仕事だけ どちらかの環境で ECMAScript 6をサポート, またはあなたが JavaScriptコンパイラを使用する Babelなど.
4.アニメーションが新しいAPIを手に入れた
jQuery 3はrequestAnimationFrame（）APIを使用してアニメーションを実行し、アニメーションを作成します。 よりスムーズかつ高速に実行. 新しいAPIはそれをサポートするブラウザでのみ使用されます。古いブラウザ（IE9など）では、jQueryは以前のAPIをアニメーション表示用のフォールバックメソッドとして使用します。.
RequestAnimationFrame あなたがそれが知っていることやあなたがそれを使うべき理由に興味があるなら、CSS Tricksはそれについて良い投稿をしています。.
5.特別な意味を持つ文字列をエスケープするための新しい方法
新しい jQuery.escapeSelector（） メソッドを使用すると、文字列や文字をエスケープできます。 CSSの他の何かを意味する できるようにするために jQueryセレクタで使用する; JavaScriptインタプリタをエスケープしないと正しく理解できない.
次の例を参考にして、ドキュメントを見ればこの方法をよりよく理解できます。
“たとえば、ページ上の要素のIDが “abc.def” で選択することはできません $（ "＃abc.def"） セレクタは次のように解析されるからです。 “idを持つ要素 'abc' それはまたクラスを持っています 'def'. ただし、次のように選択できます。 $（ "＃" + $ .escapeSelector（ "abc.def"））.”
そのようなケースがどれほど頻繁に発生するかわからないが、このような問題にぶつかった場合、今すぐあなたはそれを素早く修正する簡単な方法を持っている.
6. SVGをサポートするクラス操作メソッド
残念ながら、jQuery 3はまだ SVGを完全にはサポートしていません, しかし、次のようにCSSクラス名を操作するjQueryメソッド .addClass（） そして .hasClass（）, 今に使用することができます ターゲットSVG文書 同様に。つまり、jQueryを使ってクラスを変更（追加、削除、切り替え）または検索できるということです。 スケーラブルベクターグラフィックス, それからCSSでクラスをスタイルする.
7.遅延オブジェクトはJS Promiseと互換性があります
JavaScriptの約束 - 使用されるオブジェクト 非同期計算用 - ECMAScript 6で標準化されています。それらの振る舞いと機能はPromises / A +規格で指定されています。.
jQuery 3では, 遅延オブジェクト 新しいPromises / A +標準と互換性があるように作られました。延期は チェーン可能オブジェクト それを可能にする コールバックキューを作成する.
新機能の変更 非同期コールバック関数の実行方法; 約束 開発者が論理的に同期コードに近い非同期コードを書くことを可能にする.
アップグレードガイドのコード例を参照するか、JavaScript Promiseの基本についてのこのScotch.ioの素晴らしいチュートリアルをご覧ください。.
8. jQuery.when（）は複数の引数を別々に解釈します
の $ .when（） メソッドは コールバック関数を実行する. これはバージョン1.5以降のjQueryの一部です。それは柔軟な方法です。これはゼロ引数でも動作し、1つ以上のオブジェクトを引数として受け取ることもできます。.
jQuery 3はどのように議論の仕方を変えるか $ .when（） 解釈されます それらが含まれているとき $ .then（） 方法 これに対して追加のコールバックを引数として渡すことができます。 $ .when（） 方法.
jQuery 3では、入力引数を それから（） メソッド $ .when（）, 引数はになります Promise互換の "thenable"として解釈される.
これは $。 方法はできるようになります より広い範囲の入力を受け入れる, ネイティブのES6プロミスやブルーバードプロミスなど、より洗練された非同期コールバックを書くことを可能にします。.
9.新しい表示/非表示ロジック
増やすために レスポンシブデザインとの互換性, に関連するコード 要素の表示と非表示 jQuery 3で更新されました.
これからは .show（）, .隠す（）, そして .トグル（） 方法はに焦点を当てます インラインスタイル, 計算されたスタイルの代わりに、このように彼らはそうするでしょう スタイルシートの変更を尊重する.
新しいコードは 表示 可能な場合はいつでもスタイルシートの値 動的に変化する デバイスの向きやウィンドウのサイズ変更などのイベント時.
この文書は、最も重要な結果は次のようになるだろうと主張しています。
「結果として、切断された要素は 隠されたと見なされなくなりました インラインでない限り 表示：なし。, したがって .トグル（） 意志 もはやそれらを区別しない jQuery 3.0以降の接続要素から。
もっとよく理解したいのなら 新しい表示/非表示ロジックの結果, これについての興味深いGithubの議論があります.
jQuery開発者は、新しい動作がどのように機能するかについてのGoogle Docsの表も公開しました。 さまざまなユースケースで.
10. XSS攻撃に対する特別な保護
jQuery 3が追加されました 追加のセキュリティ層 クロスサイトスクリプティング（XSS）攻撃に対して開発者に指定を要求することで dataType： "スクリプト" のオプションで $ .ajax（） そしてその $ .get（） 方法.
つまり、クロスドメインスクリプトリクエストを実行したい場合は、 これを宣言しなければならない これらのメソッドの設定で.
ドキュメントによると、新しい要件は「リモートサイト」が スクリプト以外のコンテンツを配信する しかし後で決定する 悪意を持ったスクリプトを提供する変更は影響しません $ .getScript（） メソッド dataType： "スクリプト" 明示的にオプション.
