jQuery:prop vs attr。。。澄清

请注意，这不是的副本；这个问题指的是prop和attr的基本功能，而这个问题是它们作为setter的区别

在使用jQuery 1.7.2进行测试时，我试图缩小使用.prop（）设置的范围，而不是创建新元素时通过.attr（）设置的范围，我发现prop大约快2.5倍，因此似乎更可取

我能找到的唯一使用attr设置的列表为attr提供了以下内容：

accesskey、align、background、bgcolor、class、contenteditable、contextmenu、数据XXXX、可拖动、高度、隐藏、id、项目、itemprop、拼写检查、样式、主题、tabindex、标题、有效、宽度

这是否完整（即，列表中没有的任何内容-如最小值、最大值、步长等-应使用道具）

在测试中，当使用prop设置时，其中一些似乎工作良好。在测试上述列表时，我在使用prop设置以下内容时没有遇到任何问题：

id、类、对齐、内容可编辑、可拖动、隐藏、拼写检查、选项卡索引、标题

“使用属性设置的东西在使用prop设置时仍然有效”的列表有什么原因吗？为什么仍然应该使用属性设置？如果没有，那么在创建基本的

时，性能提高250%对我来说很好…：）

---

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

.attr（）

给出元素的属性。当该属性加载到页面上时

.prop（）

，给出元素的属性

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

---

这有你需要知道的所有差异。通常，在使用DOM操纵部件时，需要的是属性而不是属性。T.J.的文章确实澄清了这个概念。

我在网上找不到任何完整的列表。每个给出任何类型列表的人都只是复制jQuery1.6博客文章中给出的部分列表。关于#3，斯塔克斯·索托夫在这里的回答中提到了这一点。通过一次体面的讨论，讨论得更详细。MDN和W3C规范还提到，属性中有各种接口，可以将它们设置为properties（），尽管MDN实际上没有列出哪些接口是属性。MDN确实提到将属性接口用作setter比使用getAttribute更脆弱：

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

然而，现在似乎可以安全地假设，在Firefox和Chrome中呈现的任何HTML5 doctype页面都已经处于一个环境中，其中“不推荐的、不受支持的”etc接口已经被删除

因此，我使用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元素（此处不考虑窗口、文档等），除非使用.attr（），否则jQuery不会设置以下任何属性：

最后，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

---

这并不能解决这个问题。您（以及那个问题/答案）正在谈论操作DOM中已经存在的元素。我问的是如何创建新元素，这些元素显然不在DOM中。这也不涉及#3，这可能是最重要的部分。当熟悉本机DOM方法时：

$（elem）.prop（'foo'，…）

elem.foo=…

和

$（elem）.attr（'foo'，…）

elem.setAttribute（'foo'，…）

@BrianFreud，您误解了答案，一旦您了解了差异及其对DOM映射的影响，您将自动知道问题的答案。我至少在某种程度上理解差异等。但是，您没有抓住要点。这个问题特别是问，在创建元素时，设置I'd等属性有什么负面影响。它能工作，而且速度快得多——但缺点是什么？我还可以检查规范、jquery资源等，以找到答案。但是，仅仅让我去做这件事本身并不是一个答案。@BrianFreud，在OO概念中，从类派生的每个对象都有一组预先存在的属性。属性是那些改变行为的属性，如复选框的

checked

属性。这就是真正使用prop（）的地方。当as

id

是对元素的标识，因此称为属性而不是属性时，它对元素有更多的语义意义。如果你问我的话，好几个

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