所以jQuery 1.6具有新功能prop()

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

还是在这种情况下,他们做同样的事情?

如果我 必须切换到使用prop(),所有的旧attr()如果我切换到1.6,电话会断开?

UPDATE

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, 为什么?这将如何影响我的编码?

答案

Update 1 November 2012

我的原始答案专门适用于JQuery 1.6。我的建议保持不变,但JQuery 1.6.1略微改变了事情:面对预测的一堆破碎的网站,jQuery团队恢复attr()与(但不完全相同)的旧行为(但不完全相同)的布尔属性。约翰·雷斯格(John Resig)博客。我可以看到他们遇到的困难,但仍然不同意他的建议而偏爱attr()

Original answer

如果您只直接使用jQuery而不是直接使用DOM,那么这可能是一个令人困惑的变化,尽管这绝对是一个概念上的改进。但是,使用这种变化会破坏的jQuery的几个网站并不是那么好。

我将总结主要问题:

  • 您通常想要prop()而不是attr()
  • 在大多数情况下,prop()做什么attr()以前做。更换电话attr()prop()在您的代码中,通常会起作用。
  • 属性通常比属性更简单。属性值只能是字符串,而属性可以是任何类型的字符串。例如,checked财产是布尔人,style属性是每个样式具有单个属性的对象size属性是一个数字。
  • 如果存在具有相同名称的属性和属性,通常会更新一个会更新另一个,但是对于某些输入的属性,例如valuechecked:对于这些属性,该属性始终表示当前状态,而属性(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检查了复选框?查看堆栈溢出,通常会找到以下建议:

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

这实际上是世界上最简单的事情checked自1995年以来,在每个主要的可脚本浏览器中都在每个主要的易版浏览器中都存在和工作的布尔属性:

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

该属性还使检查或取消选中复选框Trivial:

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

在jQuery 1.6中,这个明确地变成了

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

使用的想法checked脚本复选框的属性是无助的,不必要的。该属性是您需要的。

  • 使用该复选框使用的正确方法是什么正确的checked属性
  • 属性值反映了默认值,而不是当前的可见状态(除了某些较旧版本的IE,从而使事情变得更难)。该属性对是否检查了页面上的复选框一无所知。看http://jsfiddle.net/VktA6/49/

来自: stackoverflow.com