個人的に油断してたんですが、jQuery 1.8がリリースされましたね。
CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。） えらい！
- jQuery Blog » jQuery 1.8 Released
- jQuery Blog » jQuery 1.8 Beta 1: See What’s Coming (and Going!)
- jQuery Blog » The New Sizzle
- jQuery Blog » jQuery Core: Version 1.9 and Beyond
- jQuery Blog » jQuery 1.9 and 2.0 — TL;DR Edition
なおjQuery UI (1.8.22)とjQuery Mobile (1.1.1)が正常に動作する事は確認しているようです。
ダウンロード
ちなみにWordPressで利用するにはこちらの記事を。
主な変更点
CSSのベンダープレフィックスを自動付加
いままで $elem.css('-webkit-transform', '...') って書いてたのが $elem.css('transform', '...') で済むようになりました。いやー、これ良いですね。
ただし罠がありますのでご注意。
モジュール化
jQuery UIのイメージですね。jQueryはたくさんの機能がありますが、必要なものだけを選んでカスタムした jquery.js を作成できるようになりました。
アニメーションの処理を刷新
複雑になってきて管理が大変になって来た事と、何やら壮大な計画があるそうで、まるっきり書き換えたとの事。
使う側としては、基本的には今までどおりです。
セレクター解析エンジンSizzleを再構築
一から書き直したようです。（しかも二度！） これで過去のものよりも高速になったとか。どこかに比較とかあるのかな？
ただし高速化の影響があるのは複雑なセレクターです。単純なセレクター（IDやクラス、要素名だけのもの）については今回は高速化されていません。元々ほぼ限界まで高速化されていましたから。
XSS対策
強化されたようです。あんまりよくわからんのですが、 $.parseHTML() が用意されています。今後はこれを使えという方針のようです。
$('<script>alert()</script>'); // => [<script>alert()</script>]
$.parseHTML('<script>alert()</script>'); // => []
$.parseHTML('<script>alert()</script>', null, true); // => [<script>alert()</script>]
また今後 (1.9) ではさらに対策を強化する、とのアナウンスもあります。 $(html) で生成できるのはごく単純なもの（例えば $('<p />') のようなもの）に限られ、また一文字目が < でないと駄目になるそうです。
まあ普通はそういう使い方だけ出来れば良いんじゃないかなと思います。属性付きのHTML要素を生成する場合は、 attr() を使うか、 $(html, props) という書き方ができます。
var $elem = $('<element />', { attr1: val1, attr2: val2 });
// => [<element attr1="val1" attr2="val2" />]
削除
| 詳細 | API | 備考 |
|---|---|---|
| #11787 | $.curCSS |
|
| #10589 | $elem.data("events") |
デバッグ用に $._data($elem, "events") が利用可能。 |
| #11738 | $elem.closest(Array) |
.closest( selector ) は引き続き利用可能。 |
| #11736 | deferred.isResolved() |
deferred.stat() で代用。 |
| #11736 | deferred.isRejected() |
deferred.stat() で代用。 |
実は $elem.data("events") が何だかわかってません。
$elem.data(“events”)はjQueryが内部用に持ってる、要素ごとに設定されたイベントハンドラですね
との事です。
削除アナウンス
将来（1.9とか）削除されるらしい。いつ消えるかは個別に調べてください。
| 詳細 | API | 備考 |
|---|---|---|
| #9385 | $.browser |
$.support で機能別に処理を。 |
| blog | $.attrFn |
|
| blog | $.sub() |
|
| blog | グローバルAjaxイベント | |
| #11721 | $.support.boxModel |
|
| #11013 | $.ajax() で {async:false} とDeferredの併用 |
同期通信では必ずコールバック関数を利用する。 |
| #10657 | $elem.size() |
$elem.length で代用。 |
| #11733 | $elem.load() |
$elem.on('load') で代用。 |
| #11733 | $elem.unload() |
$elem.on('unload') で代用。 |
| #11733 | $elem.error() |
$elem.on('error') で代用。 |
| #9800 | $elem.andSelf() |
$elem.addBack() へ移行。 |
| #11719 | $elem.bind('ready', fn) |
$(fn) ないし $.ready(fn) で代用。(※1) |
| #11786 | $elem.toggle(handler1, handler2) |
$elem.toggle([duration] [, callback]) は引き続き利用可能。(※2) |
| #9400 | フォーム項目疑似クラス（ :text や :checkbox など） |
[type=text] 等で代用。 |
| #11731 | hover イベント |
|
| #11718 | $elem.data() で発火するイベント |
|
| #9399 | $.ajax() が返すPromiseの .success() |
Promiseの .done() へ移行。 |
| #9399 | $.ajax() が返すPromiseの .error() |
Promiseの .fail() へ移行。 |
| #9399 | $.ajax() が返すPromiseの .complete() |
Promiseの .always() へ移行。 |
- ※1 … 厳密に言うとちょっと違います。
ready発火前なら同じですが、ready発火後に.on('ready', fn)してもfnは実行されません。$.ready(fn)であれば、発火後に実行した場合fnは即時実行されます。なおreadyはjQuery独自のイベントです。 - ※2 …
.toggle()には1.0の頃から「.show()と.hide()を交互に実行する」という機能と、「クリックされるたびに二種類のコールバック関数を交互に実行する」という機能がありました。名前がかぶってるというわけですね。紛らわしいので後者が削除になります。
いやはや、 $.browser は前々から非推奨とされてましたが、いよいよ削除です。これも含め、だいたいは互換プラグインへの移行が計画されている様子です。
ファイルサイズ
| ファイル名 | ファイルサイズ |
|---|---|
| jquery-1.8.0.min.js | 92,556 Bytes |
| jquery-1.7.2.min.js | 94,840 Bytes |
わずかですが、小さくなりました。減ったというか、機能を追加しているのに増えなかった、という観点で見ると嬉しいかなと思います。
さて、では個別に見て行きましょうか。
ベンダープレフィックス自動補完
CSSのプロパティを操作する際、名前は自動的にベンダープレフィックスが補完されるようになりました。例えば $elem.css('transform', '...') と書くと、自動的に "-moz-transform" なり -webkit-transform" なり、適切なものが利用されます。
ベンダープレフィックスの必要・不要を見分けるのにブラウザーが持っているスタイル情報を利用しているので、常に最新のブラウザーに対応できます。
値はベンダープレフィックスが補完されない
ただしひとつ注意点がありまして、プロパティ名の方には自動で付加してくれますが、値の方はそうはしてくれないみたいです。例えば transition で注意が必要です。
// Webkitのベンダープレフィックスの場合
$elem.css('-webkit-transition', '-webkit-transform 1s'); // OK
$elem.css( 'transition', '-webkit-transform 1s'); // OK
$elem.css( 'transition', 'transform 1s'); // NG
"transform" ではなくベンダープレフィックスを付けて、 "-webkit-transform" のようにしてやる必要があります。
モジュール化
ただしjQuery UIのビルドツールのような、オンラインでカスタムしてダウンロード、というツールは（まだ？）ないようです。作るか。
以下のモジュールに分割されています。
ajaxcssdimensionseffectsoffset
なお今後もフル版を提供し続けるので、カスタマイズはやんなくていいよ安心してね、との事です。
ビルドツールはgrunt
カスタムビルドにはgruntを利用します。
jQuery 1.8のビルド方法はこちらに。
このgruntの導入と利用は（UNIXに不慣れな方には）だいぶ大変かと思います。やっぱりオンラインビルダーが必要ですよね。
アニメーション
中身がこんがらがってきたので整理して、Deferredをより有効に使うようになったようです。
高度なアニメーション処理をより円滑に行うために、 $.Animation というが用意されました。専用のプロパティを持ったPromiseを返します。（PromiseってのはDeferredのアレです。）
$.Animation の簡単な使い方
まだドキュメントに掲載されていないようなので、試してみてさっくり使い方を示します。
var anim = $.Animation($elem[0], { left: 100 }, { duration: 1000 });
注意点が二つあって、まず第一引数がjQueryオブジェクトではない事に注意してください。生のHTML要素オブジェクトです。
もうひとつは引数を省略できないということ。三つとも指定しないと TypeError になっちゃいます。全体的にエラー訂正は省略されている印象です。速度を求めた結果なのだと思います。
TypeError: Cannot read property 'duration' of undefined
戻り値 anim はPromiseで、 .progress() や .done() といったメソッドを用いてコールバック関数を与える事ができます。
$.Animation は各種のアニメーションに利用できる
また第一引数は、実は任意のオブジェクトを与える事ができます。より抽象的な使い方を示します。
var from = 0, to = 100;
var elem = { value: from };
var properties = { value: to };
var options = { duration: 1000 };
var anim = $.Animation(elem, properties, options);
// animはPromise
anim
.progress(function() { console.log('progress', arguments); })
.done(function() { console.log('done', arguments); });
こっちの使い方の方が $.Animation を使う意義がありそう。実際、jQuery BlogではCanvasを操作する例を挙げています。
このとき注意が必要なのが、 properties に与えたプロパティは、必ず elem にも存在しなければならないという事です。存在しない場合、 TypeError になります。
TypeError: Cannot use 'in' operator to search for 'xxx' in undefined
jQueryの今後の展開
予定
- jQuery 1.9 (2013前半)
- 1.8で「反対」とされた多数のインターフェイスを削除。一部については互換プラグインを提供。IE 6/7/8も引き続きサポート。
- jQuery 1.9.x (2013年末)
- 引き続き不具合修正や新ブラウザーへの対応など。
- jQuery 2.0 (2013前半、1.9が出てすぐ)
- このバージョンでは1.9と同じAPIを提供。ただしIE 6/7/8のサポートを打ち切り、再設計して軽量化、高速化。
古いIEのサポート
継続されます。
1.9と2.0は（古いIEのサポート以外は）同じ機能を提供するようになるみたいです。不安なら全てカバーした1.9を使えば良いし、不要なら軽量な2.0を使えばよろしい。
またHTMLをこんな風にする事で、適切なバージョンのjQueryを読み込む事ができます。
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->
将来 (2.1) では古いIEのサポートはどうなるか
「（占いの）水晶玉でも持ってきやがれ」との事です。
ちなみにWindows XPのサポートは2014年の四月まで。そんなに気にしなくて良いんじゃないかな。
おしまい
間違ってるところあればコメント欄で教えてくださいまし。
gruntの使い方と、あと（ .querySelectorAll() があるのに）Sizzleが何故必要なのか、てな事を近いうちに記事できたらなー思っています。乞うご期待。（夏休みで出かけちゃうけどね。）
追記: Sizzleの方、書きました。
とっぴんぱらりのぷう。
追記
- 削除、削除アナウンスの情報を更新 (2012-08-18)
-
- 詳細ページ（主にチケット）へのリンクを追加。
- 代用等の備考を追加。
.toggle()とか紛らわしいしね。 - 削除アナウンスに、
$.ajax()の戻り値Promiseの.success(),.error(),.complete()を追加。 - 削除アナウンスの、 「
$.ajax()の同期オプション{ async: false }」を「$.ajax()が同期{ async: false }のときのDeferred併用」に修正。