jQuery中prop和attr的区别

HTML5学堂：本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop()，很多开发者在使用时，经常容易混淆，今天HTML5学堂小编-其其就带你一起看看attr和prop方法。

jQuery文档中，attr和prop的参数都是一样的，而这两个东西都被认为是属性，那么他们之间到底有什么区别呢？下面我们一起验证下。

attr与prop的真身

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

到这里可能还有些模糊，下面我们来直接举个例子。

html代码

1. <input id="box" type="checkbox"/>

js代码

1. $("#box").attr("checked") // undefined
2. $("#box").prop("checked") // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

我们继续看，加上checked属性后。

1. <input id="box" type="checkbox" checked/>

1. $("#box").attr("checked") // checked
2. $("#box").prop("checked") // true

这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性。id，type等属性也属于对象属性，prop也可以操作，那么问题来了，自定义属性prop能否成功支持呢，我们也试试。

1. <input id="box" type="checkbox" checked data-new="自定义属性"/>

1. $("#box").attr("data-new") // 自定义属性
2. $("#box").prop("data-new") // undefined

可以看出来，prop不支持自定义属性，经过自己的亲手试验，应该已经明白了他们之间的区别了吧。

总结-使用经验

1、对标签内的属性使用attr来读取和设置。

2、对DOM对象固有的一些属性，使用prop获取和设置。

HTML5学堂小编-其其。耗时：1h

欢迎沟通交流~HTML5学堂