jQuery中prop()和attr()之间的区别以及何时使用attr()和prop()

Question

我在一些地方看到.attr()用于jQuery.在一些地方.prop()被使用.但我搜索了SO和谷歌我很困惑.请告诉我这两者之间的确切区别以及何时使用它们.

我已经看到以下链接 jQuery attr与prop,有一个道具列表？ jQuery attr vs prop？

但我没有得到答案.请帮帮我.谢谢.

在给出downvote之前请说明原因,然后我将在下一篇文章中更正.

Answer 1

来自docs

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

例

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

评论后更新

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

简单的例子可以是......

<input type="test" value="test" id="test" />

这里type,value,id是attributes.Once浏览器渲染它,你会得到其他属性,如 对齐,alt,自动对焦,baseURI,检查等.

链接,如果你想了解更多这方面

Answer 2

.attr() 更改该HTML标记的属性.

.prop() 根据DOM树更改该HTML标记的属性.

正如此链接中的示例所示.输入字段可以具有属性"value".这将等于您输入的默认值.如果用户更改输入字段中的值,则DOM树中的属性"value"会更改,但原始属性将保留.

所以基本上,如果您想为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()");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>

Answer 3

JQuery是一个不断变化的库,有时他们会定期进行改进..attr()用于从HTML标记中获取属性,虽然它是完美的功能.后来添加了.prop()以更加语义,并且它更好地使用"已检查"和"已选择"等无值属性.

建议如果您使用的是更高版本的JQuery,则应尽可能使用.prop().