jQuery: prop 和 attr......澄清

13 浏览
0 Comments

jQuery: prop 和 attr......澄清

这个问题已经有了答案:

注意，这不是.prop() vs .attr()的重复；那个问题涉及prop vs attr的基本功能，而这个问题特指它们作为setter的区别。

在尝试缩小应使用.prop()设置的范围与应使用.attr()设置的范围的范围时，通过使用jQuery 1.7.2测试，我发现.prop()大约快2.5倍，因此它似乎更可取。

我能找到的仅有一份使用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、class、align、contenteditable、draggable、hidden、spellcheck、tabindex和title

  3. 针对使用prop仍然可以使用的“应使用attr设置的东西列表”，是否有某些原因需要仍然使用attr进行设置？如果没有，那么创建基本的时获得250％更快的性能对我来说很好... 🙂
admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

试着以简单的术语理解这段内容。

.attr() 给出元素的属性，即页面加载时的该属性。

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

  • 这可以是元素的状态，例如复选框的情况，它可以被选中或未被选中。
  • 或者，它可以是元素的修改属性，因为默认状态。

这个问题中包含了你需要知道的所有区别。通常，在处理DOM操作时，你需要使用属性而不是属性。T.J.的答案确实澄清了这个概念。

0
0 Comments

我在网上找不到任何完整的列表。 每个给出任何类型的列表的人都只是复制了 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接口仅适用于[HTML4.01]和[XHTML1.0]文档，不保证与任何未来版本的XHTML一起使用。 HTML 5 草案确实表示，它旨在向这些 HTML 接口兼容，但它说，它们中已经移除了“一些以前被弃用的，支持不好的，很少使用的或被认为是不必要的功能”。可以通过完全转到 DOM XML 属性方法（如 getAttribute()）来避免潜在的冲突。”

然而，目前看来，在Firefox和Chrome中呈现的任何HTML5文档类型的页面已经处于已经删除“弃用、支持差”，等接口的环境中，这似乎是安全的假设。

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

在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等），除非你使用.attr()，否则jQuery不会设置以下任何属性：

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()，性能显著提高：

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

0