在“怎样用jQuery来获取outerHTML属性？”这篇文章中我们有用到jQuery里面的prop()方法，现在我们来说下jquery prop()和attr()的用法区别。

Attributes vs. Properties

attributes(属性)和properties(特性)之间的差异在特定情况下是很重要，它们对应的jquery方法是attr()和prop()。

jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了取值结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

就拿复选框checkbox来说：attr()实际对应的是defaultChecked属性（attributes属性），而且仅用于设置复选框最初的值，attr()值（attributes属性）不会因为复选框的状态而改变，而prop()（property特性）会因为复选框的状态而改变。因此，  跨浏览器兼容的方法来确定一个复选框是否被选中，该使用prop()（property特性）。

上代码，看实例就明白啦 ↓

提示：你可以先修改部分代码再运行。

从上面代码的运行结果可看出：.attr()方法在取input元素checked状态时，会返回checked 和 undefined 2种状态，而不是我们想要的checked属性布尔值（true & false）；而.prop()方法运行结果才是我们想要的！

也就是说：

.prop()方法设置元素特性值非常方便，当设置selectedIndex, outerHTML, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或 defaultSelected必须使用这个方法，如设置input元素的 disabled 和 checked 属性等;
.attr()方法仅用于设置HTML标签的attribute属性值，如存取input元素的 value 属性值。

我们可以这样查看元素所有的properties(特性)值： console.log($(ele)[0])，如图：

看到这里，这就很好的解释了为什么我们能用$(ele).prop("outerHTML")、$(ele).prop("innerHTML")、$(ele).prop("className","test abc");这样的写法去获取html标签元素啦！！