jQuery 1.7.0 ～ 1.7.2 での変更箇所の自分なりのまとめ
jQuery
1.7
,
1.7.1
,
1.7.2
のリリースノートを読んで、自分なりにまとめました。
といっても、1.7.1 と 1.7.2 はバグ修正がメインであったので、
実質的には 1.7.0 だけのまとめになります。
誤訳による勘違いなどもあると思われるので、
読まれる際はご注意を。（※ページをそのまま訳したわけではありません）
箇条書きにすると以下のような感じ：
.on()と.off()の導入.delegate()と.live()の パフォーマンス向上- IE 6,7,8 の HTML5 のサポート強化
- toggle 系アニメーションが直感的に動く
- Asynchronous Module Definition (AMD) のサポート
- jQuery.Deferred の拡張（progress）
jQuery.isNumeric()の導入event.delegateTargetプロパティの導入.removeAttr()と.removeData()で 複数削除ができるように.is()の挙動の一部変更- 削除された機能
event.layerXとevent.layerYjQuery.isNaN()jQuery.event.proxy()
.on()と.off()の導入
.on()と.off()は
イベント登録・削除メソッドです。これらで既存の
.bind()(.unbind()),
.delegate()(.undelegate()),
.live()(.die())の役割を
果たすことができます。それぞれの役割は、
引数の渡し方を変えることで切り替えることができます。
.on()と.off()の用法は
以下のようになります。
$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );
selector を与えると.delegate()(.undelegate())
と同じように動き、$(document)から selector
を伴なって実行すると.live()(.die())
に相当する処理になります。
$('.comment').delegate('a.add', 'click', addNew);
$('.dialog').undelegate('a', 'click.myDlg');
// ↓
$('.comment').on('click', 'a.add', addNew);
$('.dialog').off('click.myDlg', 'a');
$('a').live('click', fn);
$('a').die('click');
// ↓
$(document).on('click', 'a', fn);
$(document).off('click', 'a');
selector を与えない、もしくは null の場合は
.bind()(.unbind())になります。
$('a').bind('click', myHandler);
$('form').bind('submit', { val: 42 }, fn); // data を渡す場合
// ↓
$('a').on('click', myHandler);
$('form').on('submit', { val: 42 }, fn);
$(window).unbind('scroll.myPlugin');
// ↓
$(window).off('scroll.myPlugin');
.on()への引数が3つで第2引数が文字列の時、
その引数が.bind()での data なのか
.delegate()での selector なのかあいまいですが、
selector とみなされて.delegate()の処理に
なるようです。 data をオブジェクトで渡すようにすれば、
いざ出くわした時に悩むことがなくなります。
1.7 でも既存の方法は使えますが、1.7 以降を使う場合は
.on()(.off())の使用が
推奨されています。
.delegate()と.live()の
パフォーマンス向上
.delegate()と.live()を使った場合の、
イベント登録の際の要素探索の早さをリファクタリングにより
向上させ、1.6.4 でかかる時間のおよそ半分になったそうです
(
http://i.imgur.com/QHvsl.png
)。
IE 6,7,8 の HTML5 のサポート強化
IE 6-8 で.html()などのメソッドで HTML5 のタグを
使いたい場合、
innerShiv
などを使ったりしなければならなかったのですが、
1.7 でこれがサポートされるようになりました。
しかしそれでもまだ
html5shiv
などを使う必要があります。
toggle 系アニメーションが直感的に動く
.slideToggle()や.fadeToggle()などの
アニメーションが.stop()で中止された時に
ちゃんと動かなかったのを修正した（
http://bugs.jquery.com/ticket/8685
）らしいです。
あと、.stop()はキューごとに止められるように
なりました。用法は
.stop( [queue] [, clearQueue] [, jumpToEnd] )
です。第一引数にキューの名前を指定します。
Asynchronous Module Definition (AMD) のサポート
AMD API をサポートしたため、 RequireJS や curl.js などの AMD に準拠したローダから jQuery を動的にロードしたり ready イベントをコントロールしたりできるようになったそうです。
jQuery.Deferred の拡張（progress）
jQuery.Deferred オブジェクトに新しいハンドラ
deferred.progress()とその通知用メソッド
deferred.notify(),
deferred.notifyWith()が追加されました。
また、この導入に合わせてdeferred.pipe()と
deferred.then()に progress コールバックが
登録できるようになっています。
現在 jQuery.Deferred は jQuery.Callbacks を使って実装されているそうです。 jQuery.Callbacks はコールバック関数をキューして、 追加・削除・実行などの管理を柔軟に行えるオブジェクトを 生成することができます。
jQuery.isNumeric()の導入
jQuery.isNumeric()は引数に取った値が
数値かどうかを判定し、boolean 値を返します。
文字列で表した数値でも数値と判断します。
リファレンスページ
の例が分かりやすいです。
// http://api.jquery.com/jQuery.isNumeric/ での例です
$.isNumeric("-10"); // true
$.isNumeric(16); // true
$.isNumeric(0xFF); // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5"); // true (指数表現の文字列)
$.isNumeric(3.1415); // true
$.isNumeric(+10); // true
$.isNumeric(0144); // true (8進数表現の数値リテラル)
$.isNumeric(""); // false
$.isNumeric({}); // false (empty object)
$.isNumeric(NaN); // false
$.isNumeric(null); // false
$.isNumeric(true); // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false
event.delegateTargetプロパティの導入
event.delegateTargetプロパティは
.delegate()や selector を渡す.on()
を使って登録したイベントハンドラの中から、
そのイベントハンドラの登録先の要素の祖先にある、
.delegate()（.on()）を使用した
要素を取得します。
要するに.delegate()した要素を指します。
.delegate()（.on()）を使用した
イベントハンドラでない場合は、
event.currentTargetと同じものを返します。
<div id="div1" class="box">
<div id="div2">
<div id="div3">
<input id="btn1" type="button" value="button1">
</div>
</div>
</div>
<div id="div4" class="box">
<div id="div5">
<div id="div6">
<input id="btn2" type="button" value="button2">
</div>
</div>
</div>
$(".box").on("click", "input", function(event){
var delt = $(event.delegateTarget);
var curt = $(event.currentTarget);
console.log("delt("+ delt.size() + "): " + delt.attr("id"));
console.log("curt: " + curt.attr("id"));
});
// button1 をクリックすると
// delt(1): div1
// curt: btn1
// button2 をクリックすると
// delt(1): div4
// curt: btn2
.removeAttr()と.removeData()で
複数削除ができるように
表題の通りです。複数の属性を削除したい場合は、属性名を空白で 区切って指定します。複数の data を削除したい場合は、 キーを空白で区切って指定するか、配列で指定します。
$("#id1").removeAttr("attr1 attr2 attr3");
$("#id2").removeData("key1 key2 key3");
$("#id2").removeData(["key4" "key5" "key6"]);
.is()の挙動の一部変更
.is()に渡すセレクタの中に:first,
:gtなどのセレクタ（positional selectors）が
入っている場合の挙動が 1.7 で変わりました。
例えば$("p:first").is("p:last")を実行すると、
1.7 より前では、$("p:first")の返り値である
jQuery オブジェクト（ここでは p 要素一つ）を元にして
.is()のセレクタでフィルタリングします。
そのため、文書内に p 要素が存在すればtrueを返します。
一方、1.7 からは$("p:first")を元にせず
文書を元に適用し、それから現在の jQuery オブジェクト
（$("p:first")）の最初の要素が、
適用した結果の要素にあてはまるかどうかを判断します。
コードでいうと以下のような感じの式の評価値が返ります。
return $(document).find("p:last").index( $("p:first")[0] ) >= 0;
そのため$("p:first").is("p:last")は 1.7 からは
文書内に p 要素が複数ある場合はfalseを返します。
positional selectors は jQuery の拡張で W3C の標準ではないので なるべく W3C のセレクタを使うことを jQuery 側は推奨しています。
削除された機能
event.layerXとevent.layerY
Chrome のコンソールがやかましい
ので deprecate の期間を置かずの削除です。
サポートしている他のプラットフォームで使う場合は
event.originalEvent.layerXと
event.originalEvent.layerYで使用可能です。
jQuery.isNaN()
JavaScript の同名の関数と意味が違って紛らわしく、
ドキュメント化もされてなかったので削除です。
代わりにjQuery.isNumeric()を
利用したりすることを示唆しています。
jQuery.event.proxy()
代わりにjQuery.proxy()を使うようにしましょう。
