jQuery中attr()和prop()在修改checked属性时的区别


Posted in Javascript onJuly 18, 2014

在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题。

百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性。

checked属性即分为attribute->checked,和property->true,false。

对于一个checkbox,若未定义checked="checked",alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。

使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。

所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。

网上关于其他类似属性的图表:
jQuery中attr()和prop()在修改checked属性时的区别

另外关于在IE9之前版本中,如果property没有在DOM元素被移除之前删除,使用.prop()方法设置DOM元素property(简单类型除外:number、string、boolean)的值会导致内存泄露。为了安全的设置DOM对象的值,避免内存泄露,可以使用.data()方法。 目前尚未遇到,先记在这里。

Javascript 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
Jquery 扩展方法
May 06 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
js中settimeout方法加参数
Feb 28 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 #Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 #Javascript
iframe调用父页面函数示例详解
Jul 17 #Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 #Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 #Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 #Javascript
You might like
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
php 数据结构之链表队列
2017/10/17 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
jQuery实现统计复选框选中数量
2014/11/24 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
用python写PDF转换器的实现
2020/10/29 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
外国语学院毕业生自荐信
2013/10/28 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
药品促销活动方案
2014/02/14 职场文书
老兵退伍标语
2014/10/07 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
宣传稿格式范文
2015/07/23 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Python面向对象之内置函数相关知识总结
2021/06/24 Python