所以jQuery1.6有了新的函数prop()。

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

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

如果我必须切换到使用prop(),那么如果我切换到1.6,所有旧的attr()调用都会中断?

更新

选择器='#id'$(选择器).click(函数){//而不是:var getAtt=this.getAttribute('style');//我是否使用:var thisProp=$(this).prop('style');//或:var thisAttr=$(this).attr(“样式”);console.log(getAtt、thisProp、thisAttr);});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js“></script>测试</div>

(另请参见此小提琴:http://jsfiddle.net/maniator/JpUF2/)

控制台将getAttribute作为字符串记录,将attr作为字符串记录但将prop作为CSSStyleDeclaration记录,为什么?这对我未来的编码有何影响?


当前回答

属性在HTML文本文档/文件中(==想象这是解析HTML标记的结果),而财产位于HTMLDOM树中(==基本上是JS意义上某个对象的实际属性)。

重要的是,其中许多都是同步的(如果您更新了class属性,那么html中的class属性也将被更新;否则)。但某些属性可能会与意外的财产同步,例如,checked属性对应于defaultChecked属性,以便

手动选中复选框将更改.prop('checked')值,但不会更改.attr('checked)和.prop('defaultChecked')的值设置$('#input').prop('defaultChecked',true)也将更改.attr('checked'),但这在元素上不可见。

经验法则是:.prop()方法应该用于布尔属性/财产和html中不存在的财产(例如window.location)。所有其他属性(您可以在html)可以并且应该继续使用.attr()操作方法(http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

这里有一个表显示了.prop()的首选位置(尽管.attr()仍然可以使用)。


为什么您有时会想使用.prop()而不是.attr(),后者是官方推荐的?

.prop()可以返回任何类型-string、integer、boolean;而.attr()始终返回字符串。.prop()据说比.attr()快2.5倍。

其他回答

所有内容都在文档中:

属性和财产之间的差异在特定情况下可能很重要。在jQuery1.6之前,.attr()方法在检索某些属性时有时会考虑属性值,这可能会导致不一致的行为。从jQuery1.6开始,.prop()方法提供了显式检索属性值的方法,.attr()方法检索属性。

所以使用道具!

只是HTML属性和DOM对象之间的区别导致了混淆。对于那些习惯于使用DOM元素的本地财产(比如this.src this.value this.checked等)的人来说,.prop是对这个家庭的热烈欢迎。对其他人来说,这只是增加了一层混乱。让我们澄清一下。

查看.attr和.prop之间差异的最简单方法是以下示例:

<input blah="hello">

$('input').attr('blah'):按预期返回'hello'。这里没有惊喜。$('input').prop('blah'):返回undefined——因为它正在尝试执行[HTMLInputElement].blah——并且该DOM对象上不存在这样的属性。它仅作为该元素的属性存在于作用域中,即[HTMLInputElement].getAttribute('blah')

现在我们改变了一些事情,比如:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

$('input').attr('beah'):返回'apple'是吗?为什么不“梨”,因为这是最后一个元素。因为属性是在输入属性上更改的,而不是DOM输入元素本身——它们基本上彼此独立工作。$('input').prop('beah'):返回'pear'

您真正需要注意的是,不要因为上述原因而在整个应用程序中混合使用相同的属性。

看到一把小提琴展示了不同之处:http://jsfiddle.net/garreh/uLQXc/


属性与属性:

第1轮:风格

<input style="font:arial;"/>

.attr('style')--返回匹配元素的内联样式,即“font:arial;”.prop('style')--返回一个样式声明对象,即CSSStyleDeclaration

第二轮:价值

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

.attr('value')--返回'hello'*.prop('value')--返回'i changed the value'

*注意:出于这个原因,jQuery有一个.val()方法,它在内部等同于.prop('value')

在jQuery1.6之前,attr()方法在检索属性时有时会考虑属性值,这会导致相当不一致的行为。

prop()方法的引入提供了一种显式检索属性值的方法,而.attr()检索属性。

文件:

jQuery.attr()获取匹配元素集合中第一个元素的属性值。

jQuery.prop()获取匹配元素集合中第一个元素的属性值。

通常你会想使用财产。仅将属性用于:

获取自定义HTML属性(因为它未与DOM属性同步)。获取与DOM属性不同步的HTML属性,例如获取标准HTML属性的“原始值”,如<input value=“abc”>。

TL;博士

在大多数情况下,使用prop()而不是attr()。

属性是输入元素的当前状态。属性是默认值。

属性可以包含不同类型的内容。属性只能包含字符串