.prop()与.attr()
因此jQuery 1.6有了新的函数prop()。
$(selector).click(function(){
//instead of:
this.getAttribute('style');
//do i use:
$(this).prop('style');
//or:
$(this).attr('style');
})或者在这种情况下他们做同样的事？
如果我必须切换到使用prop()，那么如果切换到1.6，所有旧的attr()调用都会中断吗？
更新
selector = '#id'
$(selector).click(function() {
//instead of:
var getAtt = this.getAttribute('style');
//do i use:
var thisProp = $(this).prop('style');
//or:
var thisAttr = $(this).attr('style');
console.log(getAtt, thisProp, thisAttr);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>
(另请参阅此小提琴：http://jsfiddle.net/maniator/JpUF2/)
控制台将getAttribute记录为字符串，attr记录为字符串，而prop记录为CSSStyleDeclaration，为什么？这对我未来的编码有什么影响？
回答 17
Stack Overflow用户
发布于 2011-05-03 23:06:19
更新2012年11月1日
我最初的答案特别适用于jQuery 1.6。我的建议是一样的，但jQuery 1.6.1略有改变:面对预计会出现的网站崩溃，jQuery team 与布尔属性的旧行为接近(但与之不完全相同)。John也是在博客上。我看到了他们遇到的困难，但仍然不同意他推荐更喜欢attr()的建议。
原始答案
如果您只使用过jQuery，而没有直接使用DOM，那么这可能是一个令人困惑的更改，尽管这在概念上肯定是一个改进。不过，对于使用jQuery的海量网站来说，情况就不太好了，这些网站会因为这种变化而崩溃。
我将总结主要问题：
- 通常您需要的是
prop()而不是attr()。 - 在大多数情况下，
prop()做的都是attr()以前做的事情。在代码中用attr()替换对prop()的调用通常是可行的。 - 属性通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型的。例如，
checked属性是布尔值，style属性是具有每个样式的单独属性的对象，size属性是数字。 - 如果存在相同名称的属性和属性，通常更新其中一个属性将更新另一个属性，但对于某些输入属性(如
value和checked)，情况并非如此:对于这些属性，属性总是表示当前状态，而属性(除了旧版本的IE)对应输入的默认值/检查(反映在defaultValue/defaultChecked属性中)。 - 这一更改移除了附加在属性和属性前面的一些神奇的jQuery层，这意味着jQuery开发人员必须了解属性和属性之间的区别。这是件好事。
如果您是jQuery开发人员，并且对有关属性和属性的整个业务感到困惑，那么您需要后退一步，了解一下它，因为jQuery不再那么努力地保护您不受这些东西的影响。关于这个主题的权威但有点枯燥的词，有规范：DOM4，HTML DOM，DOM级别2，DOM级别3。Mozilla的DOM文档对于大多数现代浏览器都是有效的，并且比规范更容易阅读，因此您可能会发现它们的DOM引用很有用。有一个元素属性一节。
作为处理属性比属性更简单的示例，请考虑最初选中的复选框。以下是两个可能的有效HTML片段：
<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">那么，如何用jQuery检查复选框呢？查看Stack溢出，您通常会发现以下建议：
if ( $("#cb").attr("checked") === true ) {...}if ( $("#cb").attr("checked") == "checked" ) {...}if ( $("#cb").is(":checked") ) {...}
这实际上是世界上与checked布尔属性有关的最简单的东西，自1995年以来，该属性在所有主要的可脚本浏览器中都存在并运行得非常完美：
if (document.getElementById("cb").checked) {...}
该属性还使检查或取消选中复选框变得非常简单：
document.getElementById("cb").checked = false
在jQuery 1.6中，这无疑成为
$("#cb").prop("checked", false)
使用checked属性编写复选框的想法既没有帮助，也没有必要。这是你需要的财产。
- 使用
checked属性检查或取消复选框的正确方式并不明显 - 属性值反映的是默认状态，而不是当前可见状态(除了一些旧版本的IE之外，这使得事情变得更加困难)。该属性不告诉您是否选中了页面上的复选框。见http://jsfiddle.net/VktA6/49/。
Stack Overflow用户
发布于 2011-05-03 20:05:31
对于jQuery来说，这种变化已经持续了很长一段时间。多年来，他们一直满足于一个名为attr()的函数，它主要检索DOM属性，而不是您希望从名称中得到的结果。attr()和prop()的分离应该有助于缓解HTML属性和DOM属性之间的混淆。$.fn.prop()获取指定的DOM属性，而$.fn.attr()则获取指定的HTML属性。
为了充分理解它们是如何工作的，这里有一个关于HTML属性和DOM属性之间区别的扩展说明：
HTML属性
语法：
<body onload="foo()">
用途：允许标记具有与其关联的数据，用于事件、呈现和其他目的。
Visualization:
在主体上显示了class属性。它可以通过以下代码访问：
var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");属性以字符串形式返回，并且在浏览器和浏览器之间可能不一致。然而，在某些情况下，它们可能是至关重要的。正如上面的例子所示，IE8古怪模式(和下面)期望在get/set/removeAttribute中使用DOM属性的名称，而不是属性名。这是为什么了解差异很重要的许多原因之一。
DOM性质
语法：
document.body.onload = foo;
用途：允许访问属于元素节点的属性。这些属性类似于属性，但只能通过JavaScript访问。这是一个重要的区别，有助于澄清DOM属性的作用。请注意，属性与属性完全不同，因为这个事件处理程序分配是无用的，不会接收事件(body没有onload事件，只有onload属性)。
Visualization:
在这里，您将注意到Firebug中"DOM“选项卡下的属性列表。这些是DOM属性。你会立刻注意到其中的很多，因为你之前就会在不知不觉中使用它们。它们的值就是您通过JavaScript接收到的值。
文档
- JavaScript:大卫·弗拉纳根的权威指南
- HTML属性，Mozilla开发中心
- DOM元素属性，Mozilla开发中心
示例
HTML：<textarea id="test" value="foo"></textarea>
JavaScript：alert($('#test').attr('value'));
在早期版本的jQuery中，这将返回一个空字符串。在1.6中，它返回适当的值foo。
在没有浏览过这两个函数的新代码的情况下，我可以自信地说，这种混淆更多地是与HTML属性和DOM属性之间的差异有关，而不是与代码本身有关。希望这能帮你澄清一些事情。
-Matt
Stack Overflow用户
发布于 2011-09-27 16:55:09
属性位于DOM中；属性位于解析为DOM的HTML中。
进一步的细节
如果更改属性，则更改将反映在DOM中(有时使用不同的名称)。
示例:更改标记的class属性将更改DOM中该标记的className属性(这是因为已经使用了class )。如果标记上没有属性，则仍然具有相应的DOM属性，其值为空或默认值。
示例:虽然您的标记没有class属性，但DOM属性className确实存在一个空字符串值。
编辑
如果您更改其中一个，则另一个将由控制器更改，反之亦然。此控制器不在jQuery中，而是在浏览器的本机代码中。
https://stackoverflow.com/questions/5874652
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号