jQuery中prop（）和attr（）之间的区别以及何时使用attr（）和prop（）[duplicate]

3 回答

• 76

  来自docs

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

  例

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

  updated after comment

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

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

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

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

  link如果您想了解更多相关信息

  回复于 2024-04-27T06:50:51+08:00
• 7

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

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

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

  所以基本上，如果您希望为HTML标记的属性设置默认值，请使用 .attr() 函数 . 如果用户可以更改该值（例如输入，复选框，无线电等），请使用 .prop() 函数获取最新值 .

  Reference : HTML: The difference between attribute and property

  Example Snippet

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

  回复于 2024-04-27T06:50:51+08:00
• 53

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

  建议如果您使用的是更高版本的JQuery，则应尽可能使用.prop（） .

  回复于 2024-04-27T06:50:51+08:00