javascript jquery选择器 - jQuery attr vs道具?




name选择 selector (5)

现在这不只是另一个有什么区别的问题 ,我已经做了一些测试(http://jsfiddle.net/ZC3Lf/)修改<form action="/test/"></form>​propattr 。其输出是:

1)道具修改测试
支柱: http://fiddle.jshell.net/test/1 : http://fiddle.jshell.net/test/1
Attr: http://fiddle.jshell.net/test/1 : http://fiddle.jshell.net/test/1

2)Attr修改测试
支柱: http://fiddle.jshell.net/test/1 : http://fiddle.jshell.net/test/1
Attr: /test/1

3)然后进行支柱修改测试
支柱: http://fiddle.jshell.net/test/11 : http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11 : http://fiddle.jshell.net/test/11

4)Prop然后Attr修改测试
支柱: http://fiddle.jshell.net/test/11 : http://fiddle.jshell.net/test/11
Attr: http://fiddle.jshell.net/test/11 : http://fiddle.jshell.net/test/11

据我所知,现在我对一些事情感到困惑:
Prop:通过JavaScript进行任何修改后,它的当前状态值
Attr它是在页面加载的html中定义的值。

现在,如果这是正确的,

  • 为什么修改prop似乎使action完全合格,反之为什么修改属性不是?
  • 为什么修改prop1)修改属性,那对我没有意义?
  • 为什么修改attr 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

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

注意回报值的微小变化。

例如

attr('checked'):在1.6之前,真/假是由于1.6.1而引起的。 “checked”/ undefined返回。

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

在这里可以找到德国这个主题的详细概述:

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


我试过这个

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

并输出如下

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

这可能表明只有使用prop 读取 action时才会对其进行标准化。


不幸的是你的链接没有工作:(

尽管有一些洞察, attr是针对所有属性的。 prop属性。

在较老的jQuery版本(<1.6)中,我们只有attr 。 要获得DOM属性(如nodeNameselectedIndexdefaultValue您必须执行以下操作:

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

这吸了,所以prop补充说:

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

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

<input type="checkbox" checked>

没有checked属性,但它有一个名为checked的属性。

因此,在1.6的最终版本中, attr也会prop以便事情不会中断。 有些人希望这是一次彻底的休息,但我认为做出正确的决定是因为事情并没有在所有地方发生。

关于:

Prop:通过JavaScript进行任何修改后,它的当前状态值

Attr:在页面加载时在html中定义的值。

这并非总是如此,因为属性实际上已经改变了很多次,但是对于诸如checked这样的属性,没有属性可以改变,所以你需要使用prop。

参考文献:

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

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


有一个明显的例子可以看到.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')将返回document.form.action node => HTMLInputElement
$('form')。attr('action')将返回action属性=>#


由于问题涉及单个元素,因此该代码可能更合适:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

twernt的建议相同,但适用于单个元素; 它与jQuery FAQ中推荐的算法相匹配







javascript jquery attr prop