💃🏿 🕌 🍝 jQuery 1.4：15の新機能 🤞🏾 🥐 🙌🏽

1月14日に、jQuery 1.4が誕生しました。このリリースには、多くの新機能と改善が含まれています。この記事では、最も役立つと思われるものについて説明します。

1. jQuery属性を渡す（...）

バージョン1.4より前のjQueryでは、属性名とその値、または複数の属性を一度にパラメーターとして定義するオブジェクトのいずれかを使用した便利なattrメソッドを使用して、コレクション要素に属性を追加できました。 JQuery 1.4では、要素を作成するときに属性を2番目の引数として渡す機能が導入されました。いくつかの属性を持つハイパーリンクを作成する必要があるとします。バージョン1.4を使用すると、次のようになります。

  jQuery（ '<a/>'、{  
	 id： 'foo'、  
	 href： 'http://google.com'、  
	タイトル：「Google社員になる」、  
	 rel： 'external'、  
	テキスト：「Go to Google！」  
 }）;

リンクにはそのような属性がないため、おそらくtext属性に気づいていて、ここで何が行われるかに驚くかもしれません。実際、jQuery 1.4は独自のメソッドを使用してそれらを処理します。したがって、 テキスト属性を満たすと、jQueryは.text（）関数を呼び出し、値「Go to Google！」を渡します。
別の素晴らしい例：

  jQuery（ '<div />'、{  
	 id： 'foo'、  
	 css：{  
		 fontWeight：700、  
		色：「緑」  
	 }、  
	クリック：関数（）{  
		警告（「フーがクリックされました！」）;  
	 }  
 }）;

id属性は通常の属性として扱われ、 cssとclickは対応するメソッドの呼び出しとして扱われます。 jQueryの以前のバージョンでは、次のように記述していました。

  jQuery（ '<div />'）  
	 .attr（ 'id'、 'foo'）  
	 .css（{  
		 fontWeight：700、  
		色：「緑」  
	 }）  
	 .click（function（）{  
		警告（「フーがクリックされました！」）;  
	 }）;

2.すべてに「まで」！

DOMをバイパスする兵器庫に、「nextUntil」、「prevUntil」、「parentsUntil」という3つの新しいメソッドが登場しました。これらの各メソッドは、渡されたセレクターの条件が満たされるまで、指定された方向でDOMをバイパスします。果物のリストがあるとしましょう：

  <ul>  
	 <li>アップル</ li>  
	 <li>バナナ</ li>  
	 <li>ブドウ</ li>  
	 <li>ストロベリー</ li>  
	 <li>ナシ</ li>  
	 <li>桃</ li>  
 </ ul>

Appleの後にすべてのアイテムを選択し、Strawberryで停止する必要があります。とてもシンプルに見えます：

  jQuery（ 'ul li：contains（Apple）'）。nextUntil（ '：contains（Pear）'）;

3.マルチバインディングイベントハンドラー

イベントのチェーンを使用する代わりに、一度に1つの呼び出しで複数のイベントをバインドできます。たとえば、次のように：

  jQuery（ '＃foo）.bind（{
    クリック：関数（）{
         //何かをする
     }、
     mouseover：function（）{
         //何かをする
     }、
     mouseout：function（）{
         //何かをする
     }
 }）

これは.one（）メソッドでも機能します。

4.アニメーションの新機能

これで、1つのタイプのアニメーションに対して1つの関数を定義する代わりに、アニメーション化されたプロパティごとに異なる関数を定義できます。 jQueryには、ロッキング（デフォルト）とランプの2種類のアニメーションが含まれています。その他は別途ダウンロードする必要があります。
各プロパティのアニメーション関数を指定するには、配列を定義する必要があります。各要素の最初の値はアニメーション化されたプロパティであり、2番目の関数が使用されます。

  jQuery（ '＃foo'）。animate（{
    左：500、
     top：[500、「easeOutBounce」]
 }、2000）;

試着。
specialEasingオブジェクト、つまり次のようなレコードも使用できます。

  jQuery（ '＃foo'）。animate（{
    左：500、
    トップ：500
 }、{
    期間：2000、
     specialEasing：{
         top： 'easeOutBounce'
     }
 }）;

5.ライブメソッドの新しいイベント。

JQuery 1.4では、 submit 、 change 、 focus 、 blurイベントハンドラーのサポートが導入されています。 JQueryは.live（）メソッドを使用してイベントハンドラーを追加します。これは、複数の要素のハンドラーを一度に追加するとき、および新しい要素を追加するときに便利です。
フォーカスイベントとブラーイベントを使用するには、「focusin」および「focusout」という名前を使用する必要があることに注意してください。

  jQuery（ 'input'）。live（ 'focusin'、function（）{
     //これで何かをする
 }）;

6.関数のコンテキストを制御します。

jQuery 1.4は、jQuery名前空間に新しい「プロキシ」関数を提供します。この関数は2つの引数を取ります：「scope」とメソッドの名前。例を見てみましょう。
以下では、2つのプロパティ「clickHandler」と「config」で「app」オブジェクトが作成されます。

  var app = {
    構成：{
         clickMessage： 'こんにちは！'
     }、
     clickHandler：function（）{
        アラート（this.config.clickMessage）;
     }
 };

「.clickHandler（）」メソッドには「app」実行コンテキストがあります。これは、これがそれを参照することを意味します。これは期待どおりに機能します。

  app.clickHandler（）;  //「こんにちは！」

イベントにしがみついてみましょう：

  jQuery（ 'a'）。bind（ 'click'、app.clickHandler）;

リンクをクリックしても、何も起こりません。 jQueryはデフォルトで、ハンドラコンテキストに必要な要素（この場合はリンク）を設定するため、この例ではこれがハイパーリンクです。しかし、これは望ましくありません！この場合、これは「アプリ」オブジェクトを意味します。 jQuery 1.4では、これは非常に簡単に実現できます。

  jQuery（ 'a'）。bind（
     「クリック」、
     jQuery.proxy（アプリ、「clickHandler」）
 ）;

リンクをクリックすると、期待される結果が得られます。
プロキシ関数は、関数の「ラップ」バージョンを返し、「this」に指定したオブジェクトも設定します。これは、関数をパラメータとして別のjQueryメソッドまたはプラグインに渡す必要がある場合に役立ちます。

7.アニメーションを実行する前に一時停止します。

アニメーションイベントキューを処理する前に一時停止を追加できるようになりました。実際、これは任意のイベントキューで機能しますが、この機能は、アニメーション、つまり「fx」キューで作業する場合に最も需要があります。これにより、 setTimeoutの呼び出しとメソッドの受け渡しの混乱を避けることができます。次のようになります。

  jQuery（ '＃foo'）
     .slideDown（）//アニメーション時間
     .delay（200）//一時停止
     .fadeIn（）;  //アニメーション2

エフェクトキュー（デフォルトで使用）以外のキューにメソッドを使用する場合、その名前を2番目のパラメーターとして関数に渡す必要があります。

8. .has（）関数

jQuery 1.4では、別の要素を簡単に確認できます。これは、セレクターの：has（）フィルターと同等です。このメソッドは、渡されたセレクターに対応する要素を少なくとも1つ含むすべての要素を返します。

  jQuery（ 'div'）。has（ 'ul'）;

この場合、結果はul要素を含むdiv要素のコレクションになります。もちろん、この状況では（ ：has（） ）セレクターを使用する方が便利ですが、この方法はコレクションを動的にフィルター処理する必要がある場合に役立ちます。
jQuery 1.4は、「含む」関数も提供します。これは、2つのDOM要素を引数として取り、2番目の要素が最初の要素に含まれているかどうかを示す論理結果を返す低レベル関数です。例：

  jQuery.contains（document.documentElement、document.body）;
 //結果はtrue-<body>は<html>内にあります

9.展開！

誰もが.wrap（）メソッドについて知っています。 jQuery 1.4では、 .unwrap（）関数が登場しました。これはまったく逆の動作をします。たとえば、次のような構造があります。

  <div>
     <p>フー</ p>
 </ div>

このコードを呼び出します：

  jQuery（ 'p'）。unwrap（）;

...次の構造が返されます。

  <p>フー</ p>

言い換えると、このメソッドは要素の親を削除します。

10.データを削除せずにアイテムを削除する

新しい.detach（）メソッドを使用すると、 .remove（）メソッドと同様に、ドキュメントから要素を削除できます。主な違いは、新しいメソッドはこれらの要素に関する情報をjQueryから削除しないことです。これは、 .data（）メソッドによって追加されたデータとjQueryイベントシステムによって追加されたイベントハンドラーの両方がアクティブのままであることを意味します。
これは、アイテムを削除する場合に役立ちますが、後で必要になる可能性があることを知っています。この場合、彼のイベントとデータが関連します。

  var foo = jQuery（ '＃foo'）;
 //重要なハンドラ
 foo.click（function（）{
     alert（ 'Foo！'）;
 }）;
 foo.detach（）;  // DOMからオブジェクトを削除します
 // ...多くのコード
 foo.appendTo（ 'body'）;  //オブジェクトを追加します
 foo.click（）;  //「フー！」

11. インデックスの改善（...）

jQuery 1.4では、 .index（）メソッドを2つの新しい方法で使用できます。以前は、パラメーターとして要素を渡すことができ、その結果、現在のコレクション内のこの要素のインデックスを取得できました。
引数がメソッドに渡されない場合、メソッドが配置されているコレクション内の要素のインデックスを返します。例：

  <ul>
     <li>アップル</ li>
     <li>バナナ</ li>
     <li>ブドウ</ li>
     <li>ストロベリー</ li>
     <li>ナシ</ li>
     <li>桃</ li>
 </ ul>

リストアイテムをクリックすると、インデックス付きのメッセージが表示されます。これは次のように行われます。

  jQuery（ 'li'）。クリック（関数（）{
     alert（jQuery（this）.index（））;
 }）;

jQuery 1.4では、セレクタを.index（）関数の引数として指定することもできます。これにより、セレクタの処理からコレクション内のインデックスを見つけることができます。
戻り値は整数型で、コレクション内にアイテムが見つからない場合、結果は-1になります。

12.関数を引数として取るDOM制御メソッド。

ほとんどのドキュメントモデル管理メソッドは、引数として関数を取ることができます。この関数は、コレクション内の各要素に対して呼び出され、目的のメソッドを使用して定義されます。
次の機能にはこのような機会があります。

この関数では、現在の要素はthisであり、そのインデックスは引数として渡されます。

  jQuery（ 'li'）。html（関数（i）{
     return '現在の要素のインデックス：' + i;
 }）;

また、いくつかの関数では、2番目の引数を使用できます。いわゆるインストール方法（たとえば.html（）または.attr（ 'href'） ）を呼び出す場合、2番目の引数は値になります。例：

  jQuery（ 'a'）。attr（ 'href'、function（i、currentHref）{
     return currentHref + '？foo = bar';
 }）;

ご覧のように、 .css（）および.attr（）メソッドには、関数の2番目の引数と、変更する最初のプロパティを渡すことができます。

  jQuery（ 'li'）。css（ 'color'、function（i、currentCssColor）{
     i％2を返しますか？  '赤'： '青';
 }）;

13.オブジェクトのタイプの決定

jQuery 1.4には、ターゲットのタイプを判断するのに役立つ2つの新しいヘルパー関数が含まれています。
まず、 isEmptyObject関数。この関数は、ブール型の結果を返し、渡されたオブジェクトが空かどうかを示します（直接または間接的にプロパティがありません）。次に、このisPlainObject関数は、渡されたオブジェクトが '{}'または 'new Object（）'のいずれかで作成されたjavaScriptオブジェクトであるかどうかを示します。

  jQuery.isEmptyObject（{}）;  // true
 jQuery.isEmptyObject（{foo：1}）;  // false

 jQuery.isPlainObject（{}）;  // true
 jQuery.isPlainObject（ウィンドウ）;  // false 
 jQuery.isPlainObject（jQuery（））;  // false

14. 最も近い（...）メソッドの改善

.closest（）メソッドは、セレクターの配列をパラメーターとして取得できるようになりました。これは、特定の特性を持つ複数のアイテムを選択する場合に非常に便利です。
さらに、実行コンテキストを2番目の引数として渡すことができます。つまり、目的のアイテムを検索する範囲を制御できます。これらの拡張機能の両方が実際に使用されることはめったにありませんが、jQueryの開発に驚くべき効果がありました。

15.新しいイベント「focusin」および「focusout」

これらのイベントは、 フォーカスとブラーを操作するときに使用する必要があります。これらのイベントを使用すると、要素がフォーカスを取得または失ったときに任意のアクションを実行できます。

  jQuery（「フォーム」）
     .focusin（関数（）{
         jQuery（this）.addClass（ 'focused'）;
     }）;
     .focusout（関数（）{
         jQuery（これ）.removeClass（ 'focused'）;
     }）;

これらのイベントは両方とも渡されないことに注意してください（バブル効果）。これは、下の要素または親要素がこのイベントを受け取らないことを意味します。
当初、この記事はブログ用に翻訳されていましたが、ハブで公開する機会があったので（ deeruaに感謝します）。

jQuery 1.4：15の新機能