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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
JavaScript 接口原理与用法实例详解
May 12 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 透明水印生成代码
2012/08/27 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
python基于socket实现网络广播的方法
2015/04/29 Python
学生信息管理系统python版
2018/10/17 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
12月红领巾广播稿
2014/02/13 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书