jQuery:prop vs attr ...澄清

标签 jquery html

<分区>

请注意,这不是 .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. 这是否完整(即,不在该列表中的任何内容 - 例如最小值、最大值、步长等 - 应该使用 prop)?

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

    id, class, align, contenteditable, draggable, hidden, spellcheck, tabindex, title

  3. 对于“使用 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

关于jQuery:prop vs attr ...澄清,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10978870/

相关文章:

html - 移动友好模板

javascript - 内联简单幻灯片 jQuery/UI 图像

html - CSS `background-repeat` 属性

javascript - ajax 调用期间的回发

JavaScript 在 Bootstrap 导航栏上传递数据点击

javascript - doc.fromHTML 不是函数 jsPDF

javascript - 你如何构建你的 jQuery 代码?

javascript - 如何在异步函数调用结束之前禁用按钮?

html - 如何使用 anchor 标签打开多个标签页

javascript - 按键事件和真正的键盘按键有什么区别?