关于jQuery中.attr()和.prop()的问题探讨

151 阅读 0 评论 100 点赞

我是靠谱客的博主调皮八宝粥，最近开发中收集的这篇文章主要介绍关于jQuery中.attr()和.prop()的问题探讨，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

话说写了几句代码在ie8上能正常运行，chrome和ff却不行，朋友说这就是RP啊，郁闷！

其实功能需求是这样的，两个radio：男和女，一个button：重置。启动页面默认选中男，在用户选择女之后又点击重置按钮，需要恢复到默认状态。

复制代码代码如下:

 
<input type="radio" id="hRdMale" checked="checked" name="sex" value="male" /><label for="hRdMale">男</label> 
<input type="radio" id="hRdFemale" name="sex" value="female" /><label for="hRdFemale">女</label> 
<button id="reSet">重置</button> 

我的js代码是这样的：

复制代码代码如下:

 
$("#reSet").click(function() { 
　　$("input[name='sex']:first").attr("checked",true); 
}); 

结果就是开头提到的样子，问了几个人都说不清楚，后来查了API后知道在jQuery1.6+的版本中添加了.prop()的方法，貌似和.attr()没什么区别，都可以用来获取和设置属性值。后来又了解到.prop()方法适用于Boolean值的属性，官方解释selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 以及defaultSelected 等属性需用.prop()方法。另外，看网上还有好多说“添加属性名称该属性就会生效应该使用.prop()”，本人没验证其他属性，倒是"checked"属性的确是添加就生效。所以，红色的两点应该就是.attr()和.prop()的区别所在了。

所以，将上面click事件方法里面的代码改成下面的就OK了。

复制代码代码如下:

$("input[name='sex']:first").prop("checked",true);