jQuery日本語リファレンス

jQuery does not mean Japanese Query...

jQuery1.3.2 リリース

2009年2月20日に、jQuery1.3.2がリリースされました。

ほとんどはバグフィックスですが、以下のような変更も加えられています。

セレクター指定による取得要素の順番がドキュメントの順に

今までは複数の要素を返す場合、セレクター書式で指定した順番になっていました。
それが、実際にDOMツリー上に出てくる順番で返すように変更になっています。
これは、W3Cで策定されているSelectors APIのドラフトで定義された内容に沿ったものです。

たとえば以下のような指定をした場合、
$("h1, h2, h3")
jQuery 1.3.1以前であれば、この指定された順に従って要素を返していました。
=> [h1, h1, h2, h2, h3, h3]
しかしjQuery 1.3.2からは、実際にページ上で定義されている順番に沿って返します。
=> [h1, h2, h3, h3, h1, h2]

.live()でバブリングを止められる

jQuery 1.3から追加された.live()で指定したコールバック関数内で、バブリングを止められるようになりました。
通常のイベント同様に、event.stopPropagation()や戻り値にfalseを返すことで、イベント伝播を停止させることができます。
これにより、たとえば下記のような例では、文字をクリックしても外側のliに定義したイベントはキックされないようになります。
 <ul>
   <li><b>Google</b></li>
   <li><b>Yahoo</b></li>
 </ul>
 <script>
   $("li").live("click", function(){
     $(this).addClass("active");
   });
   $("li b").live("click", function(){
     $(this).addClass("active");
     return false;
   });
 </script>
また、現時点で.live()でサポートされていない機能(submitやchangeなどのイベント対応)については、おそらく来月にも公開されるであろうjQuery 1.3.3で対応される予定が併記されています。

:visible/:hidden処理の変更

セレクター書式での:visibleおよび:hiddenの検出ロジックが、以下のように変わりました。

jQuery1.3.1以前

要素のCSSを見て、"display"が"none"ではなく、"visibility"が"hidden"ではなく、input要素であればtype属性が"hidden"でないこと


jQuery1.3.2以降

ブラウザがoffsetWidthおよびoffsetHeightにゼロより大きい値を返すこと


この変更により、対象要素のdisplayが"none"の場合はもちろん、親要素のdisplayが"none"であったり、要素のwidthやheightがゼロであった場合なども、":hidden"として検出されるようになりました。

このことで、次のような利点が得られます。
  • パフォーマンスの4倍近い超高速化(参考)
  • 従来はプラグインを用いないと得られなかった、本当の意味での"hidden"要素の取得

.height()/.width()処理の変更

.height().width().innerHeight().innerWidth().outerHeight().outerWidth()が、全てのブラウザ上で劇的にパフォーマンスを上げました。(参考)

Internet Explorer上でのセレクター処理速度向上

セレクターエンジンがjQuery1.3よりSizzleに変わり、コミュニティから多くの協力を得て、特にInternet Explorer上でのパフォーマンスが大きく向上しました。(参考)

また、単体ライブラリとしてのSizzleドキュメントが出来ました。
興味があれば参考にしてください。

.appendTo()などが、新たに追加された要素を返すように

バグ修正の一環になりますが、appendToprependToinsertBeforeinsertAfterreplaceAllが、元の要素を返してしまっていたのを、新たに挿入された要素を返すように修正しました。

何がおきたのかを理解するために、以下のサンプルを見て下さい。
 <div></div>
 <div></div>
 <script>
 $("<p/>")
   .appendTo("div")
   .addClass("test");
 </script>
jQuery1.3.1以前では、このようなコードを記述した場合に、次のような結果となっていました。
 <div><p class="test"></p></div>
 <div><p></p></div>
これはつまり、appendToが新規に作られたp要素そのものを返してしまい、実際にDOMツリーに挿入された要素を返していなかったことに起因します。
jQuery1.3.2からは、次のような結果を得られます。
 <div><p class="test"></p></div>
 <div><p class="test"></p></div>
これが、期待された結果だと思います。
前述の関数は全て、jQuery stackに新たに追加された要素を貯めるようになりました。これにより、.end()によるスタック操作も出来るようになっています。

jQuery開発チームの調査によると、この変更によって悪影響を受けるようなコードは発見できなかったということです。
自身のコードでも、以前の動作を期待して書いたことは無いので、問題ないかと思います。
このようなDOM操作系関数を多用している人は、注意して下さい。