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 相关文章推荐
JS实现遮罩层效果的简单实例
Nov 12 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
js自定义瀑布流布局插件
May 16 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
社会实践心得体会
2014/01/03 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
学习与创新自我评价
2015/03/09 职场文书
开工典礼致辞
2015/07/29 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis