jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。

リリース記事の翻訳じゃないです。

主な変更点

個人的に気になったものをピックアップしてみますよ。

既存の .bind()や .live()等に置き換わる .on(), .off()を追加

.bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。）

→詳細後述します。

toggleと.stop()の連携を改善

toggle系と組み合わせた際におかしくなってしまうのが改善されました。

→詳細後述します。

.removeData()が複数の名前を同時に受け付けるよう調整

配列か空白文字で区切った文字列を与える事で、一度に複数の値を削除できるようになりました。

jQuery.support.fixedPositionを追加

CSSのposition:fixedが使えるかの判定です。

今までiPhone Safariは使えませんでしたが、iOS 5から使えるようになりました。iOS向けのUIを作る際に力を発揮しそうですね。

もちろんIE 6にもです。

その他、jQuery.supportが提供するプロパティ数が二倍（！）に増えています。

jQuery.isNumeric()を追加、jQuery.isNaN()を削除

追加されたjQuery.isNumeric()は、削除されたjQuery.isNaN()を反転しただけです。でもこっちの方がわかりやすくていいですよね。

ちなみにjQuery.isNumber()は存在しません。

jQuery.Defferedを強化

あれこれ変わってるみたいです。

ごめんなさい、Defferedオブジェクトをあまり追っていなかったので、よくわかりません。

jQuery.Callbacksを追加

複数のコールバック関数をスマートに管理できる機能です。

→詳細後述します。

画面に表示されていない要素でも .width(), .height()が正常な値を返すように修正

個人的には嬉しい修正。

非表示要素のサイズを正常に得られるようになりました。今までは0や-123456789みたいな値が返ってきたりしてました。

削除されたもの

  • event.layerX, event.layerY
  • jQuery.isNaN()
  • jQuery.event.proxy()（非公開）

最後のはもともとドキュメントにも掲載されていない機能であったようなので、あまり気にする必要はなさそうです。ドキュメントに掲載されているjQuery.proxy()の方を使用すれば大丈夫。

IE対応

  • IEで、HTML5の新要素を .html()等で正常に扱えないのを修正
  • IEでchangeイベント、submitイベントの挙動が怪しかったのを修正
  • IEで動かなかったりメモリリークしたりしていたのを色々修正

まあ、おつかれさまです、と（笑）

その他

他にも多数の不具合修正や機能改善が行われています。

新しいイベント設定 .on(), .off()

これはなかなか使い勝手が良さそうです。インターフェイスはこうなっています。

.on(events [, selector] [, data] , fn);
.off(events [, selector] , fn);

いままでのイベント設定メソッド

さて1.6.xまでは、イベント設定のためのメソッドとして、 .bind(), .delegate(), .live()の三種類が用意されていました。まずこの三種について、復習しましょう。

メソッド 動作
$(elem).bind() $(elem)の要素でイベントが発生した際の動作を割り当てる。
$(elem).delegate() $(elem)の要素内の、引数で与えたセレクターに該当する要素でイベントが発生した際の動作を割り当てる。
$(elem).live() $(elem)が示すセレクターに該当する要素でイベントが発生した際の動作を割り当てる。（$(elem)自体は空でも良い。）

ちょっとずつ違いますね。違いますが、最終的な目的は同じです。jQuery 1.7ではこれらは全て .on()に集約されます。（今までのものも引き続き使えます。）

これからのイベント設定メソッド

まず .bind()はそのまま .on()になります。これは問題ありませんね。

続いて .delegate()も、引数の順序を変えるだけでそのまま .on()になります。引数のselectorはオプションですので、これがある場合とない場合で .bind()相当になるか .delegate()相当になるかが分かれるという話です。

最後に .live()ですが、これは$(document)に対してセレクターを指定した .on()を実行する事で、同じ状態を得る事ができます。documentは全ての要素の上位に位置しますから、すんなり理解できるのではないでしょうか。（実は現在でも同じように、$(document)に対して .delegate()を行う事で .live()の代わりになります。）

早見表

まとめるとこのようになります：

いままで これから
$(elems).bind(events [, data] , fn) $(elems).on(events [, data] , fn)
$(elems).delegate(selector, events, fn) $(elems).on(events, selector, fn)
$(selector).live(events, fn) $(document).on(events, selector, fn)

toggle系と.stop()の連携を改善

toggle系のメソッドと .stop()を組み合わせて、困った経験はありませんか？

2011-11-02 1st – jsdo.it – share JavaScript, HTML5 and CSS

このサンプルでは .toggle()で表示、非表示を切り替えていますが、アニメーションを途中で止める事ができます。半分くらいのサイズのときに止め、再び表示切り替えを再開すると……？

元のサイズには戻りません。半分くらいのサイズのままになってしまいます。透明度も半端な状態になってしまいますね。うひゃー気持ち悪い。

で今回、こいつが改善されました。

forked: 2011-11-02 1st – jsdo.it – share JavaScript, HTML5 and CSS

アニメーション前の状態を覚えているので、途中で止められても、次回のアニメーションで元に戻ります。

ただし自分でスタイルを変更すると、元に戻らなくなったりするので注意してください。

Callbacksオブジェクト

複数のコールバック関数をスマートに管理できる機能です。

例えばjQueryではイベントリスナーを複数登録できたり、個別に指定して削除する事ができますが、Callbacksオブジェクトはそれと似たような機能を利用する事ができます。

jQuery.Callbacksがコンストラクターになっています（Defferedオブジェクトのように）。利用の際はまずnew jQuery.Callbacks()を実行してインスタンスを得ます。（newは省略可能。）

Callbacksオブジェクトは以下のメソッドを持ちます。

  • add
  • remove
  • has
  • empty
  • disable
  • disabled
  • lock
  • locked
  • fireWith
  • fire
  • fired

以下のページが参考になると思います。

あまり使う機会はないかもしれませんが、人によっては便利そうです。