jQuery 1.8の更新内容をまとめたよ。

個人的に油断してたんですが、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)が正常に動作する事は確認しているようです。

ダウンロード

• http://code.jquery.com/jquery-1.8.0.min.js
• http://code.jquery.com/jquery-1.8.0.js

ちなみにWordPressで利用するにはこちらの記事を。

• WordPressでjQueryの最新版や任意のバージョンを使うには。

主な変更点

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" />]

削除

実は $elem.data("events") が何だかわかってません。

$elem.data(“events”)はjQueryが内部用に持ってる、要素ごとに設定されたイベントハンドラですねとの事です。

• Twitter / kyo_ago: $elem.data(“events”)はjQuer …

削除アナウンス

将来（1.9とか）削除されるらしい。いつ消えるかは個別に調べてください。

• ※1 … 厳密に言うとちょっと違います。ready 発火前なら同じですが、ready 発火後に .on('ready', fn) しても fn は実行されません。 $.ready(fn) であれば、発火後に実行した場合 fn は即時実行されます。なお ready はjQuery独自のイベントです。
• ※2 … .toggle() には1.0の頃から「 .show() と .hide() を交互に実行する」という機能と、「クリックされるたびに二種類のコールバック関数を交互に実行する」という機能がありました。名前がかぶってるというわけですね。紛らわしいので後者が削除になります。

いやはや、 $.browser は前々から非推奨とされてましたが、いよいよ削除です。これも含め、だいたいは互換プラグインへの移行が計画されている様子です。

ファイルサイズ

わずかですが、小さくなりました。減ったというか、機能を追加しているのに増えなかった、という観点で見ると嬉しいかなと思います。

さて、では個別に見て行きましょうか。

ベンダープレフィックス自動補完

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のビルドツールのような、オンラインでカスタムしてダウンロード、というツールは（まだ？）ないようです。作るか。

以下のモジュールに分割されています。

• ajax
• css
• dimensions
• effects
• offset

なお今後もフル版を提供し続けるので、カスタマイズはやんなくていいよ安心してね、との事です。

ビルドツールはgrunt

カスタムビルドにはgruntを利用します。

• cowboy/grunt
• gruntで快適JS/CSSビルド生活 – Takazudo hamalog （※古いです。）

jQuery 1.8のビルド方法はこちらに。

• jquery/README.md at master · jquery/jquery

この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の方、書きました。

• jQueryが要素検索に使うSizzleについて。

とっぴんぱらりのぷう。

追記

削除、削除アナウンスの情報を更新 (2012-08-18)

• 詳細ページ（主にチケット）へのリンクを追加。
• 代用等の備考を追加。 .toggle() とか紛らわしいしね。
• 削除アナウンスに、 $.ajax() の戻り値Promiseの .success(), .error(), .complete() を追加。
• 削除アナウンスの、 「$.ajax() の同期オプション { async: false }」を「$.ajax() が同期 { async: false } のときのDeferred併用」に修正。