jQuery attr vs prop? jQuery的attr和prop有什么区别？

16 浏览
0 Comments

jQuery attr vs prop? jQuery的attr和prop有什么区别？

现在这不只是又一个“有什么不同”的问题，我已经进行了一些测试来修改

​的prop和attr，结果如下：\n

\n1）prop修改测试
\n Prop：http://fiddle.jshell.net/test/1
\n Attr：http://fiddle.jshell.net/test/1 \n2）attr修改测试
\n Prop：http://fiddle.jshell.net/test/1
\n Attr：/test/1 \n3）先attr再prop修改测试
\n Prop：http://fiddle.jshell.net/test/11
\n Attr：http://fiddle.jshell.net/test/11 \n4）先prop再attr修改测试
\n Prop：http://fiddle.jshell.net/test/11
\n Attr：http://fiddle.jshell.net/test/11\n

\n现在我对一些事情感到困惑，就我所知：
\nProp：在通过JavaScript进行任何修改后的当前状态值
\nAttr：在页面加载时在html中定义的值。\n如果这是正确的，\n

    \n

  • 为什么修改prop似乎会使action完全合格，而修改属性则相反？

    • \n

  • 为什么在1)中修改prop会修改属性，这对我来说没有意义？

    • \n

  • 为什么在2)中修改attr会修改属性，它们是以这种方式链接的吗？

    • \n

\n

\n

测试代码

\nHTML
\nJavaScript \n

var element = $('form');
var property = 'action';
/*您不需要修改此行以下的内容*/
var body = $('body');
var original = element.attr(property);
body.append('
Prop Modification test
');
element.prop(property, element.prop(property) + 1);
body.append('Prop: '+element.prop(property)+'');
body.append('Attr: '+element.attr(property)+'
');
//重置
element.prop(property, original);
element.attr(property, original);
body.append('
Attr Modification test
');
element.attr(property, element.attr(property) + 1);
body.append('Prop: '+element.prop(property)+'');
body.append('Attr: '+element.attr(property)+'
');
//重置
element.prop(property, original);
element.attr(property, original);
body.append('
Attr then Prop Modification test
');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);
body.append('Prop: '+element.prop(property)+'');
body.append('Attr: '+element.attr(property)+'
');
//重置
element.prop(property, original);
element.attr(property, original);
body.append('
Prop then Attr Modification test
');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);
body.append('Prop: '+element.prop(property)+'');
body.append('Attr: '+element.attr(property)+'
');

0

3 答案

0 Comments

在jQuery中，有两个方法可以用来获取和设置元素的属性值，分别是.attr()和.prop()。然而，这两个方法在某些情况下会有不同的行为，这就引发了一个问题：jQuery的.attr()方法和.prop()方法之间有什么区别？

为了解决这个问题，我尝试了以下代码：

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

运行结果如下：

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

从结果来看，当使用.prop()读取属性值时，输出结果是经过规范化处理的；而当使用.attr()读取属性值时，输出结果则没有经过规范化处理。

我认为这并不合理，因为如果.prop()方法在读取时进行了规范化处理，那么在第2个输出结果中也应该是经过规范化处理的才对！

然而，这并不是这样的。当使用.attr()方法读取属性值时，得到的结果是未经过规范化处理的；然后将结果设置为新的属性值时，也并不会触发任何规范化处理的过程。

对于上述的疑惑，我很困惑。在上面的代码示例中，我尝试了以下操作：

element.attr(property, element.attr(property) + 1);
body.append('Prop: '+element.prop(property)+'');
body.append('Attr: '+element.attr(property)+'
');

如果.prop()在读取时进行了规范化处理，那么最后一行代码的输出结果不应该是经过规范化处理的版本吗？

变量说明：property = 'action'，body = $('body')，element = $('form')。

只有当使用.prop()方法访问属性时才会触发规范化处理，而使用.attr()方法则不会触发。

0
0 Comments

在上面的例子中，我们使用了一个表单元素和一些jQuery代码来演示.prop和.attr之间的区别。表单元素的HTML如下：

然后，我们使用jQuery在JavaScript中获取表单元素的属性值并将其输出到pre元素中：

$(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]

从输出结果可以看出，使用.prop获取表单元素的action属性值时，返回的是一个HTMLInputElement对象。而使用.attr获取同样的属性值时，返回的是一个字符串。

这个问题的原因是.prop和.attr在处理特定属性时的不同行为。.prop返回的是DOM属性的当前值，而.attr返回的是HTML属性的初始值。

解决这个问题的方法是根据具体的需求选择使用.prop还是.attr。如果需要获取DOM属性的当前值，就使用.prop。如果需要获取HTML属性的初始值，就使用.attr。

总结一下，.prop和.attr之间的区别在于它们返回的值的类型不同。.prop返回的是DOM属性的当前值，而.attr返回的是HTML属性的初始值。为了解决这个问题，我们需要根据具体的需求选择使用.prop还是.attr。

0
0 Comments

jQuery的attr和prop方法是用来获取和设置元素属性和属性值的方法。然而，在早期的jQuery版本中，只有attr方法，用来获取所有属性。如果想要获取DOM属性，如nodeName、selectedIndex或defaultValue，则需要通过一些额外的操作来实现。这不仅很麻烦，还不够直观。因此，后来引入了prop方法，用来获取DOM属性。

然而，这种改变并不向后兼容。例如，对于没有checked属性的元素，使用prop方法获取checked属性会返回undefined。而为了保持向后兼容，attr方法也被修改，使其也可以获取DOM属性的值。

在jQuery 1.6的最终版本中，attr方法不仅可以获取属性，还可以获取DOM属性。这样做的目的是为了避免代码的大规模破坏。虽然有些人希望这是一个干净的改变，但我认为做出这样的决定是正确的，因为这样做不会导致代码大规模崩溃。

需要注意的是，有时候属性值是可以被修改的，但是对于一些属性，如checked属性，没有对应的属性值可以修改，所以需要使用prop方法。

总结起来，attr方法用于获取和设置属性，而prop方法用于获取和设置DOM属性。在jQuery 1.6之前，只有attr方法，用来获取所有属性。为了方便获取DOM属性，后来引入了prop方法。为了保持向后兼容，attr方法也被修改，使其可以获取DOM属性的值。这样做虽然有些不完美，但是避免了代码的大规模破坏。

参考链接：

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

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

0