小编典典

.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为字符串,但将记录propCSSStyleDeclaration,为什么?这对我未来的编码有何影响?


阅读 156

收藏
2022-02-08

共2个答案

小编典典

我原来的答案专门适用于 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属性是数字。
  • 如果同时存在同名的属性和属性,通常更新一个会更新另一个,但对于输入的某些属性并非如此,例如valuechecked:对于这些属性,属性始终表示当前状态,而属性(旧版本的 IE 除外)对应于输入的默认值/检查性(反映在defaultValue/defaultChecked属性中)。
  • 此更改移除了一些 jQuery 魔法卡在属性和属性前面的层,这意味着 jQuery 开发人员将不得不了解一下属性和属性之间的区别。这是一件好事。

如果您是 jQuery 开发人员并且对属性和属性的整个业务感到困惑,那么您需要退后一步并了解一点,因为 jQuery 不再努力保护您免受这些东西的影响。对于该主题的权威但有些干巴巴的词,有规范:DOM4HTML DOMDOM Level 2DOM 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