読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

jQuery 1.6でattr()の動作が変わった

Javascript jQuery

jQuery 1.6がリリースされています。


リリースノートを見ると。。。ムムム!!見過ごせない変更があるではないですか。

.prop(), .removeProp(), and .attr()


.prop()、.removeProp()と.attr()に関して



In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods.
The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties.
In the past, jQuery has not drawn a clear line between properties and attributes.
Generally, DOM attributes represent the state of DOM information as retrieved from the document,
such as the value attribute in the markup <input type="text" value="abc">.
DOM properties represent the dynamic state of the document;
for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.


1.6リリースでは、DOM要素の属性とプロパティを扱うメソッドを明示的に分けました。
DOM要素のプロパティを設定/取得/削除するために、新たに.prop()および.removeProp()メソッドを用意しました。


以前のjQueryリリースにおいては、属性とプロパティの扱いをハッキリと区別していませんでした。
一般的に、DOMの属性とはドキュメントから静的に読み取れる状態を表します。例えば、<input type="text" value="abc">におけるvalue属性のそのままの状態です。
一方で、DOMのプロパティとはドキュメントの動的な状態を表します。
ですから、例えば、ユーザーがinput要素に"def"と追記したときの.prop('value')は"abcdef"ですが、.attr('value')は"abc"のままです。



In most cases, the browser treats the attribute value as the starting value for the property, but Boolean attributes such as checked or disabled have unusual semantics.


大抵の場合、ブラウザーは属性の値をプロパティの『最初の値』として認識します。ただしchecked、disabledのような真偽値には当てはまりませんが。



For example, consider the markup <input type="checkbox" checked>. The presence of the checked attribute means that the DOM .checked property is true, even though the attribute does not have a value. In the code above, the checked attribute value is an empty string (or undefined if no attribute was specified) but the checked property value is true.


<input type="checkbox" checked>を例にとってみると、checked属性には値が無い(訳注: 属性名だけという意味)のに、DOMのcheckedプロパティがtrueであることを意味しています。
このケースでは、checked属性の値は空文字列(属性そのものが指定されていない場合はundefined)です。しかし、checkedプロパティの値はtrueなのです。



Before jQuery 1.6, .attr("checked") returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state.


このようなケースにおいて、以前のリリースにおいては、.attr('checked')は真偽値(trueかfalse)を返していました。しかしリリース1.6からは、属性の実際の値(つまり、空文字列)を返します。
そして、この値はユーザーがチェックボックスの状態を変えても不変です。



There are several alternatives for checking the currently-checked state of a checkbox. The best and most performant is to use the DOM property directly, as in this.checked inside an event handler when this references the element that was clicked. In code that uses jQuery 1.6 or newer, the new method $(this).prop("checked") retrieves the same value as this.checked and is relatively fast. Finally, the expression $(this).is(":checked") works for all versions of jQuery.


checkboxの現在の状態を判定する手段はいくつか存在しますが、最良の手段はDOMのプロパティthis.checkedを直接使うことで、これはjQuery1.6以降における、$(this).prop('checked')の結果と全く同じです。
また、$(this).is(':checked')はjQueryの全てのバージョンで正しく動作します。

結構クリティカルな変更じゃね?

うーむ、$.attrを使っている箇所を全部見なおさなければ。

6/2追記

いまさら知ったのですが、案の定のこの仕様変更は議論を巻き起こしたようで、
結局は1.6.1で、attrが後方互換性を持つように修正されたようです。
http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/


もう、1.6対応済ませちゃったのに…