jquery中attr()与prop()区别

时间 2019-12-11

原文原文链接

　　咱们知道jquery中获取元素属性有两种常见的方法，一个是attr()方法，这个是用的比较多的，也是咱们第一个想到的。另一个就是prop()方法了，这个方法以前不多用到，它是jquery1.6以后新增的方法。那么这两个方法都是获取属性的，那么神马区别呢？闲话很少说，下面咱们就来讲说。jquery

　　首先从单词解释来讲attr和prop分别是单词attribute和property的缩写，它们均表示“属性”的意思。下面咱们看一个简单的例子。浏览器

<body>
    <input type="text" id="inputs" value="name">
    <script >
    $("#inputs").focusout(function(){
        var inputVal = $(this).attr("value"); 
        alert(inputVal);
    });
    </script>
</body>

　　一个简单的输入框，咱们想获取用户输入后的value，而后我就写了上面一段代码。打开浏览器测试后发现，无论我输入什么值，弹出的始终是name，也就是value的初始值。同一个输入框咱们再用prop()方法试试。测试

<body>
    <input type="text" id="inputs" value="name">
    <script >
    $("#inputs").focusout(function(){
        var inputVal = $(this).prop("value");  
        alert(inputVal);
    });
    </script>
</body>

　　咱们发现此次我输入什么就会弹出什么，这才是我想要的效果。若是这个例子不能说明什么，那么咱们再来看看下面这个例子。this

<body>
    <input type="checkbox" id="testBox">
    <script>
        console.log($('#testBox').attr('checked'));  // undefined
        console.log($('#testBox').prop('checked'));  // false
    </script>
</body>

　　一个单选框，我想知道它是否被选中，而后我就获取他的checked值，这个时候我发现使用attr()方法返回的是undefined，而使用prop()方法就能够正确获取一个布尔值。这是为何呢？spa

　　对于某个 DOM 节点对象，properties 是该对象的全部属性，而 attributes 是该对象对应元素(标签)的属性。当一个DOM 节点为某个 HTML 元素所建立时，其大多数 properties 与对应 attributes 拥有相同或相近的名字，但这并非一对一的关系。code

对于第一个例子来讲，对象

　　id:property获取的id是attribute上id的映射：获取该 property 即等于读取其对应的 attribute 值，而设置该 property 即为 attribute 赋值。blog

　　type: property 是 attribute 的映射：获取该 property 即等于读取其对应的 attribute 值，而设置该 property 即为 attribute 赋值。但type 并非一个纯粹的映射 property，由于它的值被限制在已知值（即 input 的合法类型，如：text、password）。若是你有 <input type="aaa">，而后 theInput.getAttribute("type") 会返回 "aaa"而 theInput.type 会返回 "text"。ip

　　 value:property 并不会映射 value attribute。取而代之的是 input 的当前值。当用户手动更改输入框的值，value property 会反映该改变。 property 反映了 input 的当前文本内容，而 attribute 则是在 HTML 源码 value 属性所指定的初始文本内容。get

对于表单的那个例子，attr() 方法对于未设置的 attributes都会返回 undefined。checked attribute 的值并不会随着 checkbox 的状态而做出相应改变，而 checked property 会。所以，当判断一个 checkbox 是否被选择时应该使用 property。