jQuery中attr和prop的区别

最近在写到一个checkbox的效果时，在使用attr和prop这两个方法中出了问题。那么这两个方法有什么区别呢。

首先我们想到的是去看api，一打开api，晕乎了，什么属性啊、特性啊啥的，一会给绕蒙了，现在就把我的一个简单理解在这里写出来。

1.对于html元素自身固有的属性，我们使用prop，这里强调一个“有”，即html元素本身拥有这个属性，但这html标记中可以没有写出来，也可以写出来了；

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

 比如上面代码中，checkbox中仅给出了type和id两个属性，但checkbox本身不仅有这两个属性，比如还有class、checked等属性，这个时候，我们如果要获取这些属性，就需要使用prop；

2.对于在html中自定义的属性，我们就使用attr，即然是自定义的，那肯定是在html标记中写了出来，就可以使用attr，这个时候我们可以这么理解，只要在html标记中写出来的属性，我们就可以使用attr来获取，没有写出来的属性，就不能使用attr。

<input type="checkbox" id="test" customtag="data-src"/>

  上述代码中，checkbox中，有type、id这两个checkbox本身固有的属性，我们可以通过attr获取到，还有一个自定义的 customtag属性，我们也可以使用attr获取到，本书固有的两个属性type和id，通过prop也可以获取到，而自定义的customtag通 过prop就获取不到了。

 

纠正一下，看到以前的文章，发现了个问题，就是上面的文章说的有点模糊不清了。简单来说，就是html属性的，就用attr，DOM属性的，就用prop。

那么什么是html属性，什么是DOM属性呢？来一个最简单的识别方法。

什么是HTML属性？

凡是写到HTML标记中的属性，就是HTML属性，如

<img name="home" class="nav-home" src="./images/img-home-hover.jpg" data-default="./images/img-home.jpg" data-hover="./images/img-home-hover.jpg" alt="home"/>

 上面一行带中的name、class、src、data-default、data-hover等都是html属性，而无论这些属性是html的默认属性，还是自定义属性，他们都属于html属性。

什么是DOM属性？

DOM属性，指的是DOM元素上的属性，是JS范畴的。