请注意,这不是 .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
这是否完整(即,不在该列表中的任何内容 - 例如最小值、最大值、步长等 - 应该使用 prop)?
在测试中,其中一些在使用 prop 设置时似乎工作正常。测试上面的列表,我用 prop 设置以下没有问题:
id, class, align, contenteditable, draggable, hidden, spellcheck, tabindex, title
对于“使用 attr 设置的东西在使用 prop 设置时仍然有效”的列表,为什么仍然应该使用 attr 设置?如果不是,那么在创建基本 <div id="foo" class="bar" draggable="true" title="zipzap">
时性能提高 250%对我来说似乎很好......:)
我无法在网上找到任何完整列表。每个提供任何类型列表的人都只是复制 jQuery 1.6 博客文章中给出的部分列表。关于#3,Starx sortof 在他对此处答案的评论中解决了这个问题。 http://timmywillison.com/通过体面的讨论进入更详细的细节。 MDN 和 W3C 规范还提到,有各种来自属性的接口(interface),可以将它们设置为属性 ( https://developer.mozilla.org/en/DOM/element ),尽管 MDN 实际上没有列出那些是哪些。 MDN 确实提到使用属性接口(interface)作为 setter 比使用 getAttribute 更脆弱:
“虽然这些接口(interface)通常由大多数 HTML 和 XML 元素共享,但在 DOM HTML 规范中列出了针对特定对象的更多专用接口(interface)。但是请注意,这些 HTML 接口(interface)“仅适用于 [HTML 4.01] 和 [ XHTML 1.0] 文档,并且不保证与任何 future 版本的 XHTML 一起工作。”HTML 5 草案确实声明它旨在与这些 HTML 接口(interface)向后兼容,但在谈到它们时,“一些以前被弃用、支持不佳的特性很少使用或认为不必要的已被删除。”可以通过完全移动到 DOM XML 属性方法(例如 getAttribute())来避免潜在的冲突。”
但是,现在可以安全地假设在 Firefox 和 Chrome 中呈现的任何 HTML5 文档类型页面已经处于“已弃用、支持不佳”等接口(interface)已被删除的环境中。
因此,我使用 bool 值、字符串和整数值针对每种 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 元素(这里不考虑 window、document 等),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