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


Posted in Javascript onSeptember 06, 2013

话说写了几句代码在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);
Javascript 相关文章推荐
用JS实现3D球状标签云示例代码
Dec 01 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 #Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 #Javascript
jquery实现metro效果示例代码
Sep 06 #Javascript
JS去除数组重复值的五种不同方法
Sep 06 #Javascript
JavaScript判断密码强度(自写代码)
Sep 06 #Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 #Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 #Javascript
You might like
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
django框架使用方法详解
2019/07/18 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
关于环保的标语
2014/06/13 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
html5表单的required属性使用
2021/07/07 HTML / CSS
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫