jQuery prop()与attr()的区别详解

1.情景展示

在jQuery中,根据属性获取属性值有两种方式,分别是:prop('属性名称')与attr('属性名称');

这两个方法有什么区别?适用于什么场景?

2.对比分析

关于jQuery的prop()和attr()方法的区别

我们可以看到:此时页面上的复选框,并没有设置复选框属性,由上面的验证,我们可以确定:现在没有不选中。

使用prop('checked'),我们可以得到,false,表示当前的复选框状态值;

使用attr('checked'),我们得到的是:undefined,仅代表该标签没有声明checked属性。

当页面添加属性checked后,复选框就是选中状态;

使用prop('checked'),我们可以得到,true,表示当前的复选框状态值;

使用attr('checked'),我们得到的是:checked,代表该标签checked属性的属性值。

在这里,我们做下小结:

使用prop('checked'),返回值为:true,表示复选框此时处于选中状态,false,表示没有选中;

使用attr('checked'),返回值为:checked,表示复选框此时处于选中状态,undefined,只能表明该复选框没有设置checked属性,并不能代表当前复选框所处的状态;

prop()方法如何控制复选框的选中状态?

通过prop函数的第2个参数:true/false,来改变复选框的选中状态(html页面相关内容不会改变)。

attr()方法如何控制复选框的选中状态?

通过attr的第2个参数,可以将复选框设置为“选中状态”(html页面相关内容随之改变)。

自定义属性如何控制(添加、修改、删除)?

什么叫做自定义属性?就是html标签非官方指定的属性,换句话说就是:属性的名称可以随意设置。

自定义属性的使用场景非常广泛,比方说:列表查询,我的习惯是把主键ID藏到当前行中,这样,在需要主键的时候,获取到当前行对应的属性,就能拿到对应的值。

举个栗子:我们现在需要给这个复选框,通过jQuery添加自定义属性:status,属性值为:1,如何实现?

使用prop()我们将会发现:不起作用;

使用attr()可以添加成功。

另外,自定义属性无法通过prop()来获取属性值,强制获取,只能得到:undefined;

自定义属性只能通过attr()来获取。

3.小结

jQuery
    prop() attr()
已知属性 新增属性

prop('属性名',true)或prop('属性名',false)

attr('属性名','属性名'),比如:attr('selected','selected')
修改属性(删除) 同上(无法删除属性,但可以修改属性值) removeAttr('属性名'),无法修改属性值,但可以删除属性
获取属性值 prop('属性名'),得到的值:true/fasle attr('属性名'),得到的值:属性名/undefined(如果html标签未指定属性的话,将会返回未定义,不管该标签当前是否处于选中状态)
自定义属性 新增属性(修改) 没有,无效 attr('属性名','属性值'),新增和修改都是这种方式
删除属性 没有,无效 removeAttr('属性名')
获取属性值 没有,无效 attr('属性名'),得到的值:属性名/undefined(html标签没有该自定义属性)
JavaScript
已知属性 新增属性(修改) setAttribute('属性名','属性名'),比如:setAttribute('checked','checked')
删除属性 removeAttribute('属性名'),无法修改属性值,但可以删除属性
获取属性值 .属性名,获得的属性值为:true/false或者getAttribute('属性名')
自定义属性 新增属性(修改) setAttribute('属性名','属性值'),新增和修改都是这种方式
删除属性 removeAttribute('属性名'),无法修改属性值,但可以删除属性
获取属性值 getAttribute('属性名')

html符合w3c标签的属性,建议使用prop()来操作;

用户自定义属性建议使用attr()来操作。

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

原文地址:https://www.cnblogs.com/Marydon20170307/p/15601915.html