attr()和prop()方法的区别

基于项目开发碰到的问题做个总结

昨天的项目中因为涉及到自定义radio的checked问题，因为radio是自定义的样式 用label背景图切换完成的效果

需求：根据后台接口返回的值  设置当前单选框的checked

1.首页main.htl页面    2.配置页 conf.html     3.编辑页 edit.html

点击首页配置进入配置页，配置页中点击编辑进入编辑页显示配置页中选中的编辑项

第一次直接用

后台参数是 subscribed（1,2,3）3中状态

$("input[type='radio']").eq(data.参数-1).attr("checked","checked");

但是发现一个问题编辑完以后再编辑其他项的时候 第一次编辑的选择尾随不变，其他项的radio设置全部跟随，没能重新获取的数据写入

控制台打印发现获取的数据正确，但是写入时发现同时页面获取到多个checked冲突

随后改为

$("input[type='radio']").eq(data.参数-1).prop("checked","checked");

完美解决！

总结：

1.用prop来设置属性名，html结构是不会发生变化的。而用attr来设置属性名，html结构是会发生变化的。

2.一般如果是标签自身自带的属性，我们用prop方法来获取；如果是自定义的属性，我们用attr方法来获取。

3.具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()