[解決済み] .prop() vs .attr()

質問

だから jQuery 1.6 は、新しい関数 prop() .

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

それともこの場合、同じことをするのでしょうか？

そして、もし私が する を使用するように変更しなければなりません。 prop() の場合、すべての古い attr() の呼び出しは、1.6に切り替えたら壊れるのでしょうか？

アップデイト

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(このフィドルも参照してください。 http://jsfiddle.net/maniator/JpUF2/ )

コンソールのログには getAttribute を文字列として、そして attr を文字列として扱いますが prop を CSSStyleDeclaration , なぜ？また、そのことが今後のコーディングにどのような影響を与えるのでしょうか？

どのように解決するのですか？

2012年11月1日更新

私の最初の回答は、特にjQuery 1.6に適用されるものです。私のアドバイスは変わりませんが、jQuery 1.6.1では少し状況が変わりました：壊れたWebサイトの山が予測される中、jQueryチームは 元に戻した attr() を、ブール値属性に対する以前の動作に近いもの (ただし、まったく同じではない) に変更しました。 . John Resigも ブログで紹介 . 私は、彼らの困難さを理解することができますが、それでも、彼の推奨する attr() .

オリジナルの回答

DOMを直接使用せず、jQueryだけを使用してきた場合、この変更は混乱を招く可能性がありますが、概念的には間違いなく改善されています。しかし、jQueryを使用している数多くのサイトが、この変更によって壊れてしまうのは、あまり良いことではありません。

主な問題点をまとめておきます。

• 通常 prop() よりも attr() .
• 大半のケースで prop() が行うのは attr() が使用されていました。の呼び出しに代えて attr() を prop() をコードに含めると、通常うまくいきます。
• 一般に、属性よりもプロパティの方が扱いが簡単です。属性の値は文字列だけであるのに対し、プロパティはどんな型でも構いません。例えば checked プロパティはブール値であり style プロパティは、各スタイルの個別のプロパティを持つオブジェクトです。 size プロパティは数字です。
• 同じ名前のプロパティと属性が存在する場合、通常はどちらかを更新するともう一方も更新されますが、次のような入力の特定の属性についてはこの限りではありません。 value と checked これらの属性について、プロパティは常に現在の状態を表し、属性は (IE の古いバージョンを除いて) 入力のデフォルト値/チェック状態に対応します (これは defaultValue / defaultChecked プロパティ) を使用します。
• この変更により、jQueryが属性とプロパティの前に貼り付けていた魔法の層がいくつか取り除かれ、jQuery開発者はプロパティと属性の違いについて少し学ばなければならないことになります。これは良いことです。

もしあなたがjQueryの開発者で、プロパティと属性に関するこのビジネスで混乱しているなら、jQueryがもはやあなたをこのようなことから必死に守ろうとしていないので、一歩下がってこのことについて少し学ぶ必要があるのです。このテーマに関する権威ある、しかしやや辛口の言葉としては、仕様書があります。 DOM4 , HTML DOM , DOMレベル2 , DOMレベル3 . Mozilla の DOM ドキュメントは、ほとんどのモダンブラウザで有効であり、仕様書よりも読みやすいので、彼らの DOMリファレンス が参考になります。また 要素のプロパティのセクション .

属性よりもプロパティの方が扱いが簡単な例として、初期状態でチェックされているチェックボックスを考えてみましょう。これを実現するための有効なHTMLを2つ挙げてみましょう。

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

では、jQueryでチェックボックスがチェックされているかどうかを調べるにはどうすればいいのでしょうか？Stack Overflowで調べてみると、以下のような提案がよく見受けられます。

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

これは、実は世界で最もシンプルな方法で checked 1995年以来、スクリプト可能なすべての主要なブラウザに存在し、完璧に動作しているブール値プロパティです。

if (document.getElementById("cb").checked) {...}

また、このプロパティは、チェックボックスのチェックとアンチェックを簡単にします。

document.getElementById("cb").checked = false

jQuery 1.6では、これは一義的に次のようになります。

$("#cb").prop("checked", false)

を使うというのは checked 属性をチェックボックスのスクリプトに使用することは、役に立ちませんし、不要です。必要なのはプロパティです。

• を使ったチェックボックスの正しいチェック・アンド・アンチェックの方法が何であるかは明らかではありません。 checked 属性
• 属性値は、現在の可視状態ではなく、デフォルトを反映します（IEの一部の古いバージョンを除く、したがって、事態はさらに難しくなります）。この属性は、ページ上のチェックボックスがチェックされているかどうかについては、何も教えてくれません。参照 http://jsfiddle.net/VktA6/49/ .