jQuery 1.8.0 ～ 1.8.3 での変更箇所の自分なりのまとめ

jQuery 1.8 , 1.8.1 , 1.8.2 , 1.8.3 のリリースノートを読んで、自分なりにまとめました。といっても、1.8.1 と 1.8.2 、1.8.3はほぼバグ修正メインなので、 1.8.0 だけのまとめとあまり違いありません。誤訳による勘違いなどもあると思われるので、読まれる際はご注意を。（※ページをそのまま訳したわけではありません）
箇条書きにすると以下のような感じ：

Sizzle の書き直し
アニメーションの見直し
- オプションにコールバックprogress, always, done, failを追加
- オプションにコールバックstart追加
- animation オブジェクト
- Prefilters
- tween, tweener, jQuery.Tween.propHooks
CSS のプレフィックスを自動化
$(html, props)のpropsでの指定範囲が拡大
その他
- jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の使用を[1.8.1]
- Quirks モードを使用しない[1.8.1]
- 独自擬似セレクタに関する Sizzle のドキュメント
削除されたもの
- $(element).data("events")
- Deferred.isResolved()と Deferred.isRejected()
- $(element).closest(Array)が配列を返すこと
- $.curCSS()
- $.attrFn

Sizzle の書き直し

そのため、jQuery のセレクタエンジンが高速になったそうです。 IE 6, 7 もサポートしてます。

アニメーションの見直し

アニメーション関連のコードのバグ修正や整理に加えて、新機能もいくらか導入しています。

オプションにコールバック`progress`, `always`, `done`, `fail`を追加

animate()などに渡すオプションに表題のコールバックを指定できるようになりました。これらが実行されるタイミングは以下の通りです。

progress: アニメーションのフレームごとに実行されます。計算機の性能にもよりますが、フレームは jQuery.fx.intervalで指定したミリ数ごとに実行されます。
always: 方法に関わらず、アニメーションが終了した時点で実行されます。
done: アニメーションが自然に終了した時点で実行されます。自然に終了とは、jQuery.fn.stop()で終了されず、指定時間が経過して終了することです。これはオプションの completeコールバックと同じです。
fail: アニメーションがjQuery.fn.stop()で終了した時に実行されます。

コンテキスト（thisのこと）はどのコールバックも同じで、アニメーションさせる DOM 要素になります。渡される引数は以下のようになります。

`progress`	`function( animation, percent, remaining )`
`always`	`function( animation, gotoEnd )`
`done`	`function( animation, gotoEnd )`
`fail`	`function( animation, gotoEnd )`

progress以外は同じ引数です。 animationは新規導入されたオブジェクトで、アニメーションに関する情報を保持した promise オブジェクトです。あとで少し説明します。 percentはアニメーションの進捗状況を 0 から 1 の数値にしたものです。0 が始点で 1 が終点です。 remainingはアニメーションが終了するまであと何ミリ秒残っているかを表す数値です。 gotoEndはアニメーションがどのように終了したかを表します。自然に終了した場合はundefinedに、 jQuery.fn.stop()で終了した場合は、終了時に目的値に移動するようにした場合はtrueに、その場で終了するようにした場合はfalseになります。

なお、completeコールバックにもdone コールバックと同じ引数が渡されるようになりました。

オプションにコールバック`start`追加

これはアニメーション初期化中（後述のjQuery.Animation 実行中）に実行される関数です。 thisは対象の要素になり、animation オブジェクトが引数に渡されます。

animation オブジェクト

jQuery 1.8 から、.animate()などでアニメーションを実行する時はjQuery.Animation(element, props, opts) を使ってアニメーションを定義しています。また、この関数はオブジェクトを生成していて、これをここではanimationオブジェクトと名づけています。

animationオブジェクトは promise オブジェクトで、さらに以下のようなプロパティが追加されています。

elem: DOM 要素。アニメーションする要素
props: Object。アニメーションするプロパティとそれぞれの目的値
opts: Object。アニメーションのオプション
originalProperties: Object。キャメライズ化や easing の処理が施される前の、 jQuery.Animation()に渡した時のオリジナルのプロパティオブジェクト
originalOptions: Object。prefilter の処理が施される前の、 jQuery.Animation()に渡した時のオリジナルのオプションオブジェクト
startTime: Number。アニメーションを開始した時刻。 new Date()した時に返される数値で表される
duration: Number。アニメーションする期間。ミリ秒単位
stop( gotoEnd ): Function。おそらく内部用、もしくはカスタマイズ用の関数。普通にアニメーションを利用する場合は jQuery.fn.stop()を使用する
tweens: Array。tween オブジェクトの配列。tween オブジェクトとは jQuery.fxオブジェクトに代わるオブジェクト。 tween.run()が呼ばれることで要素のスタイルプロパティが更新される。
createTween( propName, finalValue, easing ): Function。tween オブジェクトを作成し、 tweensプロパティに push する関数。この関数を prefilter で上書きすることでアニメーションをカスタマイズすることも可能。ちなみにthisはanimation オブジェクト。

Prefilters

jQuery.Animation()でのアニメーション初期化処理中、 jQuery.Animation.prefilter()という関数を使って登録した関数(ここでは prefilter と名づけます)が実行されます。 prefilter には animation オブジェクトを thisとして、要素、animation.props、 animation.optsが渡されます。

tween が作成される前に実行されるので、 animation.propsとanimation.optsをアニメーション実行前に変更することができます。（※ duration はanimation.opts.durationを変更してもアニメーションに反映されません。 animation.duration、つまりこの関数内では this.durationを変更すると反映されます。）

prefilter がfalseになるような値を返す場合は後続の prefilter が実行されます。一方、trueになるような値を返すと、その値がそのまま jQuery.Animation()の返り値になります。アニメーションを成立させるにはjQuery.Animation()の後続の処理（tween の作成やタイマーへの登録すらも）を自前で書かなくてはなりません。アニメーションのほとんどを上書きしたいとか、すごい人向けです。

tween, tweener, `jQuery.Tween.propHooks`

tween オブジェクトは以前のバージョンのjQuery.fx オブジェクトを置き換えるものです。そのため、 jQuery.fxとよく似たプロパティを持っています。

elem: アニメーションする要素
prop: アニメーションするプロパティ名。キャメル化済み
easing: easing を表す文字列
start: アニメーション開始時の値
now: アニメーション中のプロパティの現在値
end: アニメーションの目的値
unit: プロパティの値の単位
cur(): 要素からプロパティの現在値を読み取る。取得には Tween.propHooksに登録されたフックを使う
run( progress ): 要素のプロパティの値を更新する。 progressは 0 から 1 の値を取る数値でアニメーションの進捗状況を表す。更新にはTween.propHooksに登録されたフックを使う。.animate()に渡すオプション stepもここで実行される。

tweener は tween オブジェクトを生成する関数です。 jQuery.Animation()内で、登録された tweener を実行してtween を生成します。独自の tweener を作成して登録すれば tween の上書きが可能になります。 tweener を登録するにはjQuery.Animation.tweener() を使って登録します。

jQuery.Tween.propHooksは jQuery.fx.stepを置き換えるものです。このフックは、アニメーション中、要素のプロパティの値の取得や更新を行うときに tween オブジェクトの.cur()や .run()から使用されます。そのため、jQuery.Tween.propHooksを変更することでアニメーションさせる要素のプロパティの値の取得・更新処理を変更することができます。変更は cssHooks と同じようにやります。

jQuery.Tween.propHooks[ property ] = { // property には プロパティ名
    get: function( tween ) {
         // 引数の tween から情報を取得できる。
         // 要素は tween.elem から、
         // プロパティ名はtween.prop から取得する
         // tween の cur() で使ってる
    },
    set: function( tween ) {
         // 引数の tween から情報を取得できる。
         // 要素は tween.elem、プロパティ名は tween.prop、
         // 値はtween.now や tween.unit が利用できる。
         // tween の run() で使っている
    }
}

CSS のプレフィックスを自動化

.css()や.animate()等で CSS プロパティを使う時、いちいちベンダープレフィックス（ "-moz-"とか"-ms-"とか "-webkit-"とか）を付けなくても、必要な時に自動で付けてくれるようになりました。

`$(html, props)`の`props`での指定範囲が拡大

以前は$(html, props)に渡すpropsには、属性やイベントと、一部のメソッド（val(), css(), html(), text(), width()など）が指定できましたが、1.8 ではどんな jQuery のメソッドやプラグインでも使用できるようになりました。

$("#container").append(
  $("<div>", {
      html: "sample text",                    // 1.8 未満
      css: { width: "300px", height: "300px", // でも可能
             backgroundColor: "#cccccc" },
      animate: { width: "150px",              // 1.8 から可能
                 height:"450px" }
    })
);

その他

jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の使用を[1.8.1]

jQuery 1.8.1 と共に使用するなら jQuery UI なら 1.8.23 以降、 jQuery Mobile なら 1.1.1 以降を使用するようにしましょう。

Quirks モードを使用しない[1.8.1]

jQuery は Quirks モードをサポートしていないし、 Quirks モードでテストもしていないそうです。

独自擬似セレクタに関する Sizzle のドキュメント

いままでドキュメント化されてなかったそうで、それが公式の Sizzle のドキュメントでドキュメント化されたそうです。 jQuery での独自擬似セレクタの定義で互換性を保ちたい場合はここの例を参考にするとよさそうです。

削除されたもの

`$(element).data("events")`

`Deferred.isResolved()`と `Deferred.isRejected()`

いくつもある状態の中で「～か否か」を聞くより、「何の状態ですか」と聞いた方が良いということで、 1.7 で Deferred.state() が導入されたことだし、表題のメソッド2つはほぼ必要無くなり削除となりました。

`$(element).closest(Array)`が配列を返すこと

主に内部での使用や、プラグイン作者向けだったとのこと。使われてなかったらしく削除となりました。

`$.curCSS()`

jQuery.css()のエイリアスだったとか。ドキュメント化されておらず削除になりました。

`$.attrFn`

これもドキュメント化されていませんでした。 $(html, props)で、どのメソッドが使用可能かを定義してあったオブジェクトらしいです。 1.8 でその存在意義を無くし削除になりました。

私的なjQuery他

jQuery他について学んだことのまとめとかを記録する。

jQuery 1.8.0 ～ 1.8.3 での変更箇所の自分なりのまとめ

Sizzle の書き直し

アニメーションの見直し

オプションにコールバック`progress`, `always`, `done`, `fail`を追加

オプションにコールバック`start`追加

animation オブジェクト

Prefilters

tween, tweener, `jQuery.Tween.propHooks`

CSS のプレフィックスを自動化

`$(html, props)`の`props`での指定範囲が拡大

その他

jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の使用を[1.8.1]

Quirks モードを使用しない[1.8.1]

独自擬似セレクタに関する Sizzle のドキュメント

削除されたもの

`$(element).data("events")`

`Deferred.isResolved()`と `Deferred.isRejected()`

`$(element).closest(Array)`が配列を返すこと

`$.curCSS()`

`$.attrFn`

スポンサードリンク

Sizzle の書き直し

アニメーションの見直し

オプションにコールバックprogress, always, done, failを 追加

オプションにコールバックstart追加

animation オブジェクト

Prefilters

tween, tweener, jQuery.Tween.propHooks

CSS のプレフィックスを自動化

$(html, props)のpropsでの指定範囲が拡大

その他

jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の 使用を[1.8.1]

Quirks モードを使用しない[1.8.1]

独自擬似セレクタに関する Sizzle のドキュメント

削除されたもの

$(element).data("events")

Deferred.isResolved()と Deferred.isRejected()

$(element).closest(Array)が配列を返すこと

$.curCSS()

$.attrFn

スポンサードリンク

オプションにコールバック`progress`, `always`, `done`, `fail`を追加

オプションにコールバック`start`追加

tween, tweener, `jQuery.Tween.propHooks`

`$(html, props)`の`props`での指定範囲が拡大

jQuery UI 1.8.23 以降、jQuery Mobile 1.1.1 以降の使用を[1.8.1]

`$(element).data("events")`

`Deferred.isResolved()`と `Deferred.isRejected()`

`$(element).closest(Array)`が配列を返すこと

`$.curCSS()`

`$.attrFn`