JavaScript.prop（）与.attr（）

一尘不染

JavaScript.prop（）与.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 prop()，attr()那么如果我切换到1.6 ，所有旧呼叫都会中断？

更新

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>

控制台将记录getAttribute为字符串，将记录attr为字符串，但是将记录prop为CSSStyleDeclaration，为什么？将来如何影响我的编码？

阅读 751

2020-04-22

共1个答案

一尘不染

我的原始答案专门适用于jQuery 1.6。我的建议保持不变，但jQuery 1.6.1进行了一些细微更改：面对可预测的一堆破损的网站，jQuery团队恢复attr()为接近（但不完全相同）布尔属性的旧行为。约翰·雷西格（John Resig）也对此发表了博客。我可以看到他们遇到的困难，但仍然不同意他的推荐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 Level 2，DOM Level 3。Mozilla的DOM文档对大多数现代浏览器均有效，并且比规范更易于阅读，因此您可能会发现其DOM参考有用

作为如何比属性更容易处理属性的一个示例，考虑一个最初选中的复选框。这是执行此操作的两个有效HTML片段：

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

那么，如何确定jQuery是否选中了该复选框？查看堆栈溢出，通常会发现以下建议：

if ( $("#cb").attr("checked") === true ) {...}
if ( $("#cb").attr("checked") == "checked" ) {...}
if ( $("#cb").is(":checked") ) {...}

这实际上是世界上最简单的关于checkedBoolean属性的事情，自1995年以来，该属性在每个主要的可编写脚本的浏览器中都已经存在并且可以完美地工作：

if (document.getElementById("cb").checked) {...}

该属性还使选中或取消选中复选框变得很简单：

document.getElementById("cb").checked = false

在jQuery 1.6中，这无疑变成了

$("#cb").prop("checked", false)

使用该checked属性编写复选框脚本的想法是无益且不必要的。该属性是您所需要的。

目前尚不清楚使用此checked属性检查或取消选中复选框的正确方法是什么
该属性值反映的是默认值，而不是当前的可见状态（某些IE的较旧版本除外，因此使操作更加困难）。该属性不会告诉您是否已选中页面上的复选框。

2020-04-22