jQuery：prop vs attr ...澄清 [英] jQuery: prop vs attr... clarification

问题描述

请注意，这不是 .prop（）vs .attr（）;这个问题涉及prop vs attr的基本功能，而这个问题特定于他们作为制定者的差异。

Note, this is not a duplicate of .prop() vs .attr(); that question refers to the basic functionality of prop vs attr, while this question is specific to their differences as setters.

试图缩小应该是什么使用.prop（）设置，在创建新元素时应该通过.attr（）设置，在使用jQuery 1.7.2的测试中，我发现prop的速度提高了约2.5倍，所以看起来更合适。

In trying to narrow down what should be set using .prop(), vs what should be set via .attr() when creating a new element, in tests with jQuery 1.7.2, I find that prop is approx 2.5 times faster, so it seems preferable.

使用attr设置的唯一列表我可以找到attr：

The only list of things to be set using attr that I could find gives these for attr:

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

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设置以下内容时没有遇到任何问题：

1. is this complete (ie, anything not in that list - such as min, max, step, etc - should use prop)?

2. in testing, some of those seem to work fine when set using prop. Testing the above list, I've had no issues setting the following with prop:

id，class，align，contenteditable，draggable，hidden ，拼写检查，tabindex，标题

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

是否有某些原因，attr设置的东西仍然有效当设置为prop时，为什么它仍然应该用attr设置？如果没有，那么在创建基本< div id =fooclass =bar时，性能提高250％draggable =truetitle =zipzap> 对我来说似乎很好...... :)

Is there some reason, for that list of "stuff to set with attr that still work when set with prop", why it should still be set with attr? If not, then 250% faster performance when creating a basic <div id="foo" class="bar" draggable="true" title="zipzap"> seems good to me... :)

推荐答案

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

I cannot find any complete list online. Everyone who gives any kind of a list just copies the partial one given in the jQuery 1.6 blog post. Regarding #3, Starx sortof addressed this in his comment to an answer here. http://timmywillison.com/ goes into better detail with a decent discussion. MDN and the W3C specs also mentions that there are various interfaces from attributes where they can be set as if they were properties ( https://developer.mozilla.org/en/DOM/element ), though MDN doesn't actually list which ones those are. MDN does mention that using the property interfaces as setters is more brittle than using getAttribute:

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

"While these interfaces are generally shared by most HTML and XML elements, there are more specialized interfaces for particular objects listed in the DOM HTML Specification. Note, however, that these HTML interfaces are "only for [HTML 4.01] and [XHTML 1.0] documents and are not guaranteed to work with any future version of XHTML." The HTML 5 draft does state it aims for backwards compatibility with these HTML interfaces but says of them that "some features that were formerly deprecated, poorly supported, rarely used or considered unnecessary have been removed." One can avoid the potential conflict by moving entirely to DOM XML attribute methods such as getAttribute()."

但是，现在似乎可以安全地假设在Firefox和Chrome中呈现的任何HTML5文档类型页面已经存在于'不赞成，支持不力'等已经删除了face。

However, it seems safe to assume for now that any HTML5 doctype page rendered in Firefox and Chrome is already in an environment where 'deprecated, poorly supported', etc interfaces have already been removed.

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

Thus I've tested every attribute, as well as the non-attribute properties mentioned in the jQuery blogs, against every every HTML element type, using boolean, string, and int values.

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

Using 1.7.2 and 1.8pre, whether you call .prop() or attr(), jQuery will internally always actually use .prop for:

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

对于HTML元素（不考虑窗口，文档，这里，除非你使用.attr（），否则jQuery不会设置以下任何属性：

For HTML elements (not considering window, document, etc here), jQuery will not set any of the following attributes unless you use .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（）。在上面的第一个列表中，无论您使用.attr（）还是.prop（），jQuery总是使用.prop（）。对于此列表中的属性，jQuery使用您使用的任何内容。如果使用.prop（），则jQuery使用.prop（），反之亦然。在任何一种情况下，结果都是一样的。所以忽略任何潜在的语义考虑，只是关于prop（）比.attr（）快2.5倍，jQuery 1.6.1博客文章建议使用.attr（），但可以使用.prop（） ，性能显着提升：

And finally, jQuery will set the following list of attributes with either .prop() or .attr(). In the first list above, jQuery always uses .prop(), regardless of whether you use .attr() or .prop(). For the attributes in this list, jQuery uses whatever you use. If you use .prop(), jQuery uses .prop(), and vica versa. In either case, the result is the same. So ignoring any potential semantic considerations, just with regards to prop() being ~2.5 times faster than .attr(), the jQuery 1.6.1 blog post suggests that .attr() be used, but .prop() can be used instead, with significant increase in performance:

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 ...澄清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！