描述

在jQuery中有两个设置元素属性的方法，prop和attr,在使用的时候很多同学分不清该选择哪一个，只能先用一个，不管用了再试另一个，虽然开发中没什么影响，但总是感觉脑中一团迷雾，下面来讲解这个两个的区别。

区别

• 对于 HTML 元素本身就带有的固有属性，在处理时，使用prop方法。

• 对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用attr方法。

深度理解

• attribute是HTML属性，property是js属性;
• 简单来说就是只要写在 html 元素上的属性都可以使用 attribute 来获取，因为 attribute 代表的就是 html 的属性，包括自定义的；
• property 代表的是 js 对象的属性，自定义的属性在 html 元素对应的 js 对象中是没有对应的属性的，所以 property 获取不到；

jquery使用两个方法直接区分了这两个属性，原生的 js 通过 getAttribute()方法和点的方式获取属性来区分，如下代码：

<input type="text" id="txtName" name="txtName" disabled />
<a href="/user/list.html" id="a" myName="zhangssan" />

//js代码
var txtName=document.getElementById("txtName");
var a=document.getElementById("a");

txtName.getAttribute("name");  //jquery的attr方式
txtName.name                //property获取方式

• 如果是 HTML 元素原有的属性，使用 attribute 和 property 都可以获取到，但是自定义的属性，只能使用 attribute 的方式来获取；
• 另外需要注意的是，有些属性通过 attribute 和 property 获取的值不同；比如diabled、href、自定义属性等；
• disabled通过 attribute 获取不到值或者是 disabled 字符串，通过 property 获取的是 true 或 false
• href通过 attribute 获取的是 html 元素中写的值，比如上面的就是/user/list.html",但用 property 获取的就是加上域名的，比如http://www.baidu.com/user/list.html
• 如果通过 property 方式修改自定义属性的值，attribute是获取不到的，因为更改的是 js 的property对象，attribute对象中的值并没有被更改