.prop() vs .attr()

一尘不染

.prop() vs .attr()

javascript

所以jQuery 1.6有了新的功能prop()。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

或者在这种情况下他们做同样的事情吗？

如果我必须切换到 using ，如果我切换到 1.6 prop()，所有旧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，为什么？这对我未来的编码有何影响？

阅读 144

2022-02-08

一尘不染

我原来的答案专门适用于 jQuery 1.6。我的建议保持不变，但 jQuery 1.6.1 稍微改变了一些事情：面对预测的一堆损坏的网站，jQuery 团队恢复attr()到接近（但不完全相同）其旧的 Boolean attributes 行为。John Resig 也写了博客。我可以看到他们遇到的困难，但仍然不同意他选择的建议attr()。

原始答案

如果您只使用过 jQuery 而不是直接使用 DOM，这可能是一个令人困惑的变化，尽管它在概念上绝对是一个改进。但是对于使用 jQuery 的无数网站来说并不是那么好，这些网站会因为这种变化而崩溃。

我将总结主要问题：

你通常想要prop()而不是attr().
在大多数情况下，prop()做过attr()去做的事情。attr()在您的代码中替换对with的调用prop()通常会起作用。
属性通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型。例如，checked属性是布尔值，style属性是具有每种样式的单独属性的对象，size属性是数字。
如果同时存在同名的属性和属性，通常更新一个会更新另一个，但对于输入的某些属性并非如此，例如value和checked：对于这些属性，属性始终表示当前状态，而属性（旧版本的 IE 除外）对应于输入的默认值/检查性（反映在defaultValue/defaultChecked属性中）。
此更改移除了一些 jQuery 魔法卡在属性和属性前面的层，这意味着 jQuery 开发人员将不得不了解一下属性和属性之间的区别。这是一件好事。

如果您是 jQuery 开发人员并且对属性和属性的整个业务感到困惑，那么您需要退后一步并了解一点，因为 jQuery 不再努力保护您免受这些东西的影响。对于该主题的权威但有些干巴巴的词，有规范：DOM4，HTML DOM，DOM Level 2，DOM Level 3。Mozilla 的 DOM 文档适用于大多数现代浏览器，并且比规范更易于阅读，因此您可能会发现他们的DOM 参考很有帮助。有一个关于元素属性的部分。

作为属性比属性更容易处理的一个例子，考虑一个最初选中的复选框。以下是两个可能的有效 HTML 片段来执行此操作：

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

那么，如何确定复选框是否被 jQuery 选中？查看 Stack Overflow，您通常会发现以下建议：

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 中除外，因此使事情变得更加困难）。该属性不会告诉您页面上的复选框是否被选中。

2022-02-08

一尘不染

一个属性在 DOM 中；一个属性位于解析为 DOM 的 HTML 中。

更多细节
如果更改属性，更改将反映在 DOM 中（有时使用不同的名称）。

示例：更改class标签的属性将更改classNameDOM 中该标签的属性（这是因为class已使用）。如果标签上没有属性，则仍然有相应的 DOM 属性，其值为空或默认值。

示例：虽然您的标签没有class属性，但 DOM 属性className确实存在，但具有空字符串值。

编辑

如果您更改一个，另一个将由控制器更改，反之亦然。这个控制器不在 jQuery 中，而是在浏览器的本机代码中。

2022-02-08

.prop() vs .attr()

共2个答案