jquery .attr()与.prop()用法解析

发布时间:2020-11-04编辑:脚本学堂
用jquery实现的代码,在ie8上能正常运行,chrome和ff失败。本节解析下.attr()与.prop()的用法,希望对大家有所帮助。

用jquery写的几段代码,在ie8上能正常运行,chrome和ff失败。

需求描述:
两个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>

jquery代码:

$("#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事件方法为:
$("input[name='sex']:first").prop("checked",true);

然后,分别在Ie8、chrome、ff中运行,一切正常了。