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 でその存在意義を無くし削除になりました。