问题

因此, 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 < / code>,为什么?这将如何影响我的编码在未来?



解决方法

2012年11月1日更新

我的原始答案特别适用于jQuery 1.6.我的建议保持不变,但jQuery 1.6.1改变了一些事情:面对预测桩的破碎的网站,jQuery团队 attr()恢复到与布尔属性的旧行为接近(但不完全相同). John Resig还对其进行了博客.我可以看到他们的困难,但仍不同意喜欢 attr()的建议.

原始答案

如果你只使用jQuery而不是直接使用DOM,这可能是一个混乱的变化,虽然它绝对是一个改进的概念.不太好的网站使用jQuery会破坏作为这种变化的结果,虽然.

我将总结主要问题:

  • You usually want prop() rather than attr().
  • In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() in your code will generally work.
  • Properties are generally simpler to deal with than attributes. An attribute value may only be a string whereas a property can be of any type. For example, the checked property is a Boolean, the style property is an object with individual properties for each style, the size property is a number.
  • Where both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value/checkedness of the input (reflected in the defaultValue / defaultChecked property).
  • This change removes some of the layer of magic jQuery stuck in front of attributes and properties, meaning jQuery developers will have to learn a bit about the difference between properties and attributes. This is a good thing.

如果你是一个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)

使用选中的属性对复选框进行脚本化的想法是无益的和不必要的.属性是你需要的.

  • It's not obvious what the correct way to check or uncheck the checkbox is using the checked attribute
  • The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute tells you nothing about the whether the checkbox on the page is checked. See http://jsfiddle.net/VktA6/49/.



相关问题推荐