jQuery attr vs道具?


102

现在,这不仅仅是另一个问题了。我做了一些测试(http://jsfiddle.net/ZC3Lf/),修改了propattr<form action="/test/"></form>​ 输出为:

1)道具修改测试
道具:http://fiddle.jshell.net/test/1
属性:http://fiddle.jshell.net/test/1

2)属性修改测试
属性:http://fiddle.jshell.net/test/1
属性:/test/1

3)属性然后进行道具修改测试
属性:http://fiddle.jshell.net/test/11
属性:http://fiddle.jshell.net/test/11

4)属性然后进行属性修改测试
属性:http://fiddle.jshell.net/test/11
属性:http://fiddle.jshell.net/test/11

现在,就我所知,我对两件事感到困惑:
道具:通过JavaScript进行任何修改后的当前状态
值:网页加载时html中定义的值。

现在,如果这是正确的,

  • 为什么修改prop似乎可以使条件action完全合格,反之为什么不修改属性呢?
  • 为什么修改propin 1)修改属性,那对我没有意义?
  • 为什么修改attrin会2)修改属性,它们是要以这种方式链接?


测试代码

的HTML

的JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

Answers:


71

不幸的是,您的链接均无效:(

不过,有些洞察力attr适用于所有属性。prop用于属性。

在旧版jQuery(<1.6)中,我们只有attr。要获取nodeName,,等DOM属性selectedIndexdefaultValue您必须执行以下操作:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

糟透了,所以prop添加了:

index = $("#foo").prop("selectedIndex");

这很棒,但是令人讨厌的是它不向后兼容,因为:

<input type="checkbox" checked>

没有属性checked,但确实有一个名为的属性checked

因此,在1.6的最终版本中,attr也这样做,prop以确保事情不会中断。有些人希望这是一个干净的休息时间,但我认为做出正确的决定是因为事情并没有到处蔓延!

关于:

属性:通过JavaScript进行任何修改后的当前状态值

属性:页面加载时html中定义的值。

并非总是如此,因为实际上实际上已经更改了许多次,但是对于诸如checked之类的属性,没有要更改的属性,因此您需要使用prop。

参考文献:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr


测试的链接位于上面的“完成一些测试”上,我将使其更加明显,但是无论如何它都在这里:jsfiddle.net/ZC3Lf
Hailwood

我发现一个问题,如果属性是自定义的,而不是DOM属性,则prop()返回undefined,而attr()可以正常工作。
Hiway

3

很明显,可以看出.prop和.attr之间的差异

考虑以下HTML:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

和下面的JS使用jQuery:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

创建以下输出:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

1

我已经试过了

console.log(element.prop(property));
console.log(element.attr(property));

它输出如下

http://fiddle.jshell.net/test/
/test/ 

这或许表明,action当它仅归prop


我不这么认为,否则输出2)将被标准化!
冰雹

@Hailwood不会,因为您可以/test/在访问时attr,然后设置/test/1attr,这是元素的attr。没有任何触发规范化的过程。
郝成

我对您的意思感到困惑,2)上面的测试是:element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); 如果在读取时将其标准化,那么最后一行是否不会输出标准化版本?
冰雹

变量:property = 'action'; body = $('body'); element = $('form');
Hailwood

规范化仅在访问prop时触发,而不会访问attr。
昊城2012年

1

由于jquery 1.6.1+ attr()返回/更改了1.6之前的属性。因此,您的测试没有太大意义。

注意返回值的微小变化。

例如

attr('checked'):在1.6 true / false之前,从1.6.1开始。返回“已检查” /未定义。

attr('selected'):在返回1.6 true / false之前,因为返回1.6.1“ selected” / undefined

有关此主题的德语详细概述,请参见:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.