28

jQuery1.9 +ソフトウェア開発者であるattr()私は、日常業務でのメソッドの使用を「非推奨」にすることができますか?


多くの質問で示されているように、

「attrを使用するか、propを使用するか」については多くの混乱があります。、そして、私の(開発者の)観点から、attr()メソッドのすべての使用について、prop代わりに次を使用できます:

  1. 下位互換性:新しいソフトウェアのコーディングにはこれは必要ありません。
  2. パフォーマンスジョンは、「。attr()メソッドを介したプロパティへのアクセスは、.prop()を介した直接アクセスよりもわずかに遅くなります」と述べています。
  3. 属性値の変更prop(name,newvalue):メソッドによってすべてを変更できます。
  4. 属性の削除removeProp(name):メソッドによってすべてを削除できます。
  5. HTML属性値を確認してください:ブラウザはDOMを使用し、すべてのHTMLはDOMに変換され、DOMが影響を受ける場合は、attr(name)メソッドも影響を受けます。小道具の「強いタイプ」について:「html文字列値」よりも優れています(例:「チェック済み」とtrue)。
  6. 属性が「HTML元のコード」 で定義されているかどうかを確認attrします(ブラウザのメソッドが未定義を返すと仮定します)...まあ、ソフトウェアの一部でこれが必要ですか? フォームでは、「。val()メソッドは、フォームの値を取得または設定するための推奨されるjQueryの方法です」
  7. ブラウザー間の一貫性:両方(attrだけでなく)は一貫性のあるメソッドです。(そうですか??)。

したがって、現時点(2013年)では、 attr新しいjQueryコードを開発するときにメソッドを使用する正当な理由はわかりません...しかし、これは言い換えれば、質問です。私の中でメソッドを使用する正当な理由があります 。attr日々のタスク?

4

4 に答える 4

30

.attr()のために作られたものに便利であり、それが作られたものを行うための唯一の正しい方法であるため、非推奨ではありません(同じことを行う各要素のgetAttribute関数を使用するか、HTMLを自分で解析する以外に)。この議論が行われている唯一の理由は、jQuery (および一部の古いブラウザー (IE)) が属性とプロパティを誤って混同し、その混乱が 1.9 で明らかに修正されたためです。

.attr()は属性を取得し、 はプロパティ.prop()を取得します。この 2 つは別のものであり、公式には常にそうでした (ただし、DOM には属性に対応するプロパティがあることがよくあります)。がブラウザで認識されない属性である場合は、属性の値を取得するために使用します。 ほとんどのブラウザで見ることさえできません。<p whatever="value">whatever.attr().prop()

結果の DOMプロパティが気になる場合は、.prop(). 実際の HTML属性が気になる場合は、.attr(). それは実際にはどちらかまたは両方ではありません。同じコードで両方を使用でき、ユニバースは一度も内破しません (とにかく、それらを正しく使用したと仮定します)。:) その時点で行っている仕事に適したものを使用し、壊れていないものを「廃止」しようとするのをやめてください。

于 2013-02-25T15:23:59.297 に答える
12

私はあなたのためにフィドルを準備する自由を取りました:

http://jsfiddle.net/5REVP/

特にこの部分:

<div id="example" style="padding:10px"></div>

console.log("style");
var styleAttr = $("#example").attr("style");
console.log(styleAttr); // You get "padding:10px"
var styleProp = $("#example").prop("style");
console.log(styleProp); // You get a CSSStyleDeclaration object

「スタイル」の例は、属性がプロパティと同じではないことを明確に示しています (コンソールを確認してください)。

可読性、保守性、および下位 (および上位) 互換性のために、特定のタスクに対して常に正しいメソッドを使用する必要があります。そうしないと、メソッドが本来の動作を停止する可能性があります。その例。

.attr() メソッドは、要素の属性を取得するために使用されます。属性は、要素タグ内に含まれる情報を参照するSGML用語です。要素を検査することで、その情報を簡単に読み取ることができます。

  • 要素の「スタイル」属性を取得すると、その属性に具体的に記述されているもの以外の情報は取得されません。
  • チェックボックスの「checked」属性を取得すると、「checked」または「」のいずれかが取得されます。

.prop() メソッドは、要素の DOM プロパティを取得するために使用されます。

  • デザイナーがスタイル属性に書いたものを取得していない「スタイル」プロパティを取得した場合、要素の実際の css プロパティをすべて取得しています。
  • チェックボックスの「checked」プロパティを取得すると、true または false が返されます。
于 2013-02-25T15:43:48.510 に答える
2

.attr() は HTML 属性にのみアクセスしますが、.prop() は HTML 要素にないプロパティを取得します。ドキュメントを参照してください。

たとえば、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、および defaultSelected を取得して、.prop() メソッドで設定する必要があります。jQuery 1.6 より前では、これらのプロパティは .attr() メソッドで取得できましたが、これは attr の範囲内ではありませんでした。これらには対応する属性がなく、単なるプロパティです。

http://api.jquery.com/prop/

于 2013-02-25T15:27:28.847 に答える
0

My homework... After read @cHao and @cernunnos good explanations, and after some months using it... I thing we need another concept to decide, as programmer, when use or not prop and attr:

  • HTML source-code and its representation: the browser loads HTML page in the browser's memory space. Well, what stay at memory's browser is the DOM representation, but DOM preserves some original things, as attributes and cssText property, that are "sometimes persisted representations".
    PS: attributes that are not defined in the "standard DOM", have not a mapping to DOM properties. When one (not read-only) attribute changes, if there are corresponding (mapped) property, it can be changed automaticlally.

  • DOM state: dynamical pages need changes directly at the DOM, that is what final users see. So, if there are some "click and change" actions at the page, each time the DOM goes to a new page representation, so, each time DOM have a new state.
    When one DOM-property changes, all other DOM properties (if need) changes consistently.

With these concepts in mind, we can draw a "rule of thumb (for attr vs prop uses)":

  1. Use prop, you have 90% of chances that it works... 99% if you using jQuery for change DOM states (and standard DOM hypothesis).
  2. If you need to change or access to data-* attributes, use .data() method.
  3. Otherwise (non-DOM, non-data, or non-standard things) check if a case of use .attr(), and reserve some time to study it (see answers above).
于 2013-07-15T13:36:56.820 に答える