在jQuery中prop()和attr()的差异以及何时使用attr()和prop()。

14 浏览
0 Comments

在jQuery中prop()和attr()的差异以及何时使用attr()和prop()。

这个问题已经有答案了：.prop() vs .attr()

我在一些地方看到jQuery中使用的是.attr()，在另一些地方使用的是.prop()。但是我在SO和Google中搜索，深感困惑。请告诉我这两者之间的确切区别以及何时使用它们。

我看到了以下链接：jQuery attr vs. prop, there are a list of props?，jQuery attr vs prop?，但我没有得到答案。

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

.attr()可以改变HTML标签的属性。

.prop()根据DOM树可以更改HTML标签的属性。

如这个链接中所示的例子。一个输入框可以有属性"value"，它等于您输入的默认值。如果用户更改了输入框中的值，属性"value"在DOM树中会发生更改，但原始属性仍然保留。

因此，如果您想为HTML标签的属性设置默认值，请使用.attr()函数。如果该值可以被用户更改（例如输入框、复选框、单选框等），请使用.prop()函数获取最新值。

参考资料：HTML：属性与属性值之间的区别

示例代码：

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");
  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});



Change the input value and check the console...

0
0 Comments

来自文档

属性和属性值之间的区别在特定情况下可能很重要。jQuery 1.6之前，.attr()方法有时在检索某些属性时考虑到属性值，这可能会导致不一致的行为。从jQuery 1.6开始，.prop()方法提供了一种显式检索属性值的方式，而.attr()方法检索属性。

例子

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected应该使用.prop()方法检索和设置。在jQuery 1.6之前，这些属性可以使用.attr()方法检索，但这不在attr的范围内。这些没有相应的属性，只有属性。

评论后更新

可以为HTML元素设置属性。在编写源代码时定义它，一旦浏览器解析代码，相应的DOM节点将被创建，它是一个对象，因此具有属性。

简单的例子可以是..

这里，type、value、id是属性。一旦浏览器呈现它，您将获得其他属性，如align、alt、autofocus、baseURI、checked等。

链接如果您想更多地了解此内容

0