关于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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
Vue2 轮播图slide组件实例代码
May 31 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
Python中的多重装饰器
2015/04/11 Python
Python程序退出方式小结
2017/12/09 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
Java如何读取CLOB字段
2013/10/10 面试题
物流司机岗位职责
2013/12/28 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
领导离职感言
2015/08/03 职场文书
安全生产会议制度
2015/08/06 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL