一尘不染

jQuery attr vs道具?

javascript

现在,这不仅仅是另一个 问题了。我修改了propattr<formaction="/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 />');

阅读 240

收藏
2020-05-01

共1个答案

一尘不染

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

不过,有些洞察力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。

2020-05-01