jQuery：prop vs attr ...澄清[重复]

Question

注意，这不是.prop() vs .attr() 的重复；该问题是指 prop 与 attr 的基本功能，而此问题是针对它们作为 setter 的差异。

在尝试缩小应该使用 .prop() 设置的内容，以及在创建新元素时应该通过 .attr() 设置的内容时，在使用 jQuery 1.7.2 的测试中，我发现 prop 大约是 2.5 倍更快，所以看起来更可取。

我能找到的使用 attr 设置的唯一列表是 attr：

accesskey、align、background、bgcolor、class、contenteditable、contextmenu、data-XXXX、draggable、height、hidden、id、item、itemprop、spellcheck、style、subject、tabindex、title、valign、width

1. 这是否完整（即，不在该列表中的任何内容 - 例如 min、max、step 等 - 都应该使用 prop）？

2. 在测试中，其中一些在使用 prop 设置时似乎可以正常工作。测试上面的列表，我用 prop 设置以下内容没有问题：

   id、类、对齐、contenteditable、可拖动、隐藏、拼写检查、tabindex、标题

3. 是否有某种原因，对于“使用 attr 设置的东西在使用 prop 设置时仍然有效”的列表，为什么它仍然应该使用 attr 设置？如果没有，那么在创建基本 <div id="foo" class="bar" draggable="true" title="zipzap"> 时性能提高 250% 对我来说似乎很好...... :)

Answer 1

我在网上找不到任何完整的清单。每个给出任何类型列表的人都只是复制 jQuery 1.6 博客文章中给出的部分列表。关于#3，Starx 在他对此处答案的评论中谈到了这一点。 http://timmywillison.com/ 通过体面的讨论更详细地介绍了。 MDN 和 W3C 规范还提到，属性中有各种接口，可以将它们设置为属性（https://developer.mozilla.org/en/DOM/element），尽管 MDN 实际上并没有列出这些接口。 MDN 确实提到使用属性接口作为 setter 比使用 getAttribute 更脆弱：

“虽然这些接口通常由大多数 HTML 和 XML 元素共享，但对于 DOM HTML 规范中列出的特定对象，还有更专门的接口。但是请注意，这些 HTML 接口“仅适用于 [HTML 4.01] 和 [ XHTML 1.0] 文档，并且不保证可以与任何未来版本的 XHTML 一起使用。”HTML 5 草案确实声明它的目标是向后兼容这些 HTML 接口，但在谈到它们时说“一些以前不推荐使用的功能，支持不佳，很少已使用或认为不必要的已被删除。”可以通过完全迁移到 DOM XML 属性方法（例如 getAttribute()）来避免潜在的冲突。”

但是，现在似乎可以安全地假设在 Firefox 和 Chrome 中呈现的任何 HTML5 文档类型页面已经处于“已弃用、支持不佳”等接口已被删除的环境中。

因此，我使用 boolean、string 和 int 值针对每种 HTML 元素类型测试了每个属性以及 jQuery 博客中提到的非属性属性。

使用 1.7.2 和 1.8pre，无论你调用 .prop() 还是 attr()，jQuery 在内部总是会实际使用 .prop：

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected

对于 HTML 元素（此处不考虑窗口、文档等），jQuery 不会设置以下任何属性，除非您使用 .attr()：

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName

最后，jQuery 将使用 .prop() 或 .attr() 设置以下属性列表。在上面的第一个列表中，jQuery 总是使用 .prop()，不管你使用的是 .attr() 还是 .prop()。对于此列表中的属性，jQuery 使用您使用的任何属性。如果你使用 .prop()，jQuery 使用 .prop()，反之亦然。无论哪种情况，结果都是一样的。所以忽略任何潜在的语义考虑，只是关于 prop() 比 .attr() 快约 2.5 倍，jQuery 1.6.1 博客文章建议使用 .attr()，但可以使用 .prop() 代替，性能显着提高：

accept, action, align, alt, autocomplete, border, challenge, charset, cite, 
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, 
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, 
id, keytype, label, lang, low, max, maxlength, media, method, min, name, 
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, 
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, 
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, 
width, wrap

Answer 2

尝试用简单的术语来理解这一点。

.attr() 给出元素的属性。页面加载时的那个属性。

.prop()，给出元素的属性，

• 这可以是元素的状态，就像复选框一样，它可以被选中或取消选中。
• 或者，它可以修改元素的属性，因为默认状态。

这个question 包含您需要了解的所有差异。通常，在使用 DOM 操作部分时，您需要属性而不是属性。 T.J. 的answer真的很清楚这个概念。