.prop（）与.attr（）

逆天L2020-03-09

因此jQuery 1.6具有新功能prop()。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

还是在这种情况下他们做同样的事情？

如果我确实必须切换到using prop()，attr()那么如果我切换到1.6 ，所有旧呼叫都会中断？

更新

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

（另请参见此提琴：http : //jsfiddle.net/maniator/JpUF2/）

控制台将记录getAttribute为字符串，将记录attr为字符串，但是将记录prop为CSSStyleDeclaration，为什么？将来如何影响我的编码？

小卤蛋前端2020/03/09 18:05:41

Gary Hole answer is very relevant to solve the problem if the code is written in such way

obj.prop("style","border:1px red solid;")

Since the prop function return CSSStyleDeclaration object, above code will not working properly in some browser(tested with IE8 with Chrome Frame Plugin in my case).

Thus changing it into following code

obj.prop("style").cssText = "border:1px red solid;"

solved the problem.

逆天2020/03/09 18:05:41

1) A property is in the DOM; an attribute is in the HTML that is parsed into the DOM.

2) $( elem ).attr( "checked" ) (1.6.1+) "checked" (String) Will change with checkbox state

3) $( elem ).attr( "checked" ) (pre-1.6) true (Boolean) Changed with checkbox state

Mostly we want to use for DOM object rather then custom attribute like data-img, data-xyz.
Also some of difference when accessing checkbox value and href with attr() and prop() as thing change with DOM output with prop() as full link from origin and Boolean value for checkbox (pre-1.6)
We can only access DOM elements with prop other then it gives undefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

达蒙理查德2020/03/09 18:05:41

在jQuery 1.6之前，该attr()方法有时在检索属性时会考虑属性值，这会导致行为不一致。

该prop()方法的引入提供了一种在检索属性的同时显式检索属性值的方法.attr()。

文件：

jQuery.attr() 获取匹配元素集中第一个元素的属性值。

jQuery.prop() 获取匹配元素集中第一个元素的属性值。

逆天路易2020/03/09 18:05:41

attributes -> HTML

properties -> DOM

达蒙阿飞斯丁2020/03/09 18:05:41

通常，您需要使用属性。仅将属性用于：

获取自定义HTML属性（因为它未与DOM属性同步）。
获取与DOM属性不同步的HTML属性，例如，获取标准HTML属性的“原始值”，例如 <input value="abc">.

Harry小卤蛋2020/03/09 18:05:41

.attr()：

获取匹配元素集中第一个元素的属性值。
给您元素的值，就像在页面加载时在html中定义的那样

.prop()：

获取匹配元素集中第一个元素的属性值。
给出通过javascript / jquery修改的元素的更新值

猿GO2020/03/09 18:05:41

全部都在文档中：

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

所以使用道具！

老丝村村2020/03/09 18:05:41

TL; DR

使用prop()了attr()在大多数情况下。

甲属性是输入元件的当前状态。一个属性是默认值。

一个属性可以包含不同类型的事物。属性只能包含字符串

乐逆天2020/03/09 18:05:41

属性在DOM中；HTML中的一个属性被解析为DOM。

.prop（）与.attr（）

更多细节