为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery attr vs道具?

/ 猿问

jQuery attr vs道具?

慕虎7371278 2019-11-14 15:34:18

现在,这不仅仅是另一个问题了。我做了一些测试(http://jsfiddle.net/ZC3Lf/),修改了prop和attr,<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 />');


查看完整描述

3 回答

?
湖上湖

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


但是,有些洞察力attr适用于所有属性。prop用于属性。


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


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


查看完整回答
反对 回复 2019-11-14
?
慕姐4208626

有一个明确的案例可以看到.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]


查看完整回答
反对 回复 2019-11-14
?
缥缈止盈

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


注意返回值的微小变化。


例如


attr('checked'):从1.6.1开始,在1.6 true / false之前被抵消。返回“ checked” / undefined。


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


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


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


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信