jquery中的attr()和prop()

ゞ浴缸里的玫瑰 2023-10-06 15:28 27阅读 0赞

是不是刚开始学jQuery的时候，看到了这两个方法：`attr()`和`prop()`；感觉这不是一个意思吗？他们有什么区别呢？

![6f4a065bbda035d3df0090b5487c5110.png][]

下面简单的给大家区分一下：

*  对于HTML元素本身就带有的固有属性，在处理的时候，使用`prop()`方法。
 *  对于HTML元素我们自己自定义的DOM属性，在处理时，使用`attr()`方法。

#### **举例说明：** ####

> 这个例子里a元素的DOM属性有 `href`、 `target`和 `class`，这些属性就是a元素本身就带有的属性，也就是W3C标准里就包含有这几个属性，这些就叫做固有属性。处理这些属性时，建议使用 `prop()`方法。

> 这个例子里 `a`元素的DOM属性有 `href`、 `id`和 `del`，很明显，前两个是固有属性，而后面一个 `del`属性是我们自己自定义上去的， `a`元素本身是没有这个属性的。这种就是自定义的DOM属性，处理这些属性时，建议使用 `attr()`方法。使用 `prop()`方法取值和设置属性值时，都会返回 `undefined`值。

#### **再举一例：** ####

像`checkbox`，`disabled`，`radio`和`select`这样的元素，选中属性对应`checked`和`selected`，这些也属于固有属性，因此需要使用`prop()`方法去操作才能获得正确的结果。

$("#chk1").prop("checked") // false
    $("#chk2").prop("checked") // true

![e7c61dccdaae4ba34b5f0d023e472cc7.png][]

如果上面使用`attr()`方法，则会出现：

$("#chk1").attr("checked") // undefined
    $("#chk2").attr("checked") // "checked"

![50b77ebba0c5fbfb555a3e01381872a9.png][]

大家都知道有的浏览器只要写`disabled`，`checked`就可以了，而有的要写成`disabled = "disabled"`，`checked="checked"`，比如用`attr("checked")`获取`checkbox`的`checked`属性时选中的时候可以取到值，值为`"checked"`但没选中获取值就是`undefined`。

jQuery提供新的方法`prop()`来获取这些属性，就是来解决这个问题的，以前我们使用`attr()`获取`checked`属性时返回`"checked"`和`undefined`,现在使用`prop()`方法获取属性则统一返回`true`和`false`。

![7449cb8ee001f29808d8e3f086d5c725.png][]

[6f4a065bbda035d3df0090b5487c5110.png]: https://img-blog.csdnimg.cn/img_convert/6f4a065bbda035d3df0090b5487c5110.png
[e7c61dccdaae4ba34b5f0d023e472cc7.png]: https://img-blog.csdnimg.cn/img_convert/e7c61dccdaae4ba34b5f0d023e472cc7.png
[50b77ebba0c5fbfb555a3e01381872a9.png]: https://img-blog.csdnimg.cn/img_convert/50b77ebba0c5fbfb555a3e01381872a9.png
[7449cb8ee001f29808d8e3f086d5c725.png]: https://img-blog.csdnimg.cn/img_convert/7449cb8ee001f29808d8e3f086d5c725.png