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 相关文章推荐
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
javascript表单验证大全
Aug 12 Javascript
javascript常用函数(1)
Nov 04 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
bootstrap table表格客户端分页实例
Aug 07 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
组织关系转移介绍信
2014/01/16 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
学校推普周活动总结
2015/05/07 职场文书
董事长致辞
2015/07/29 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python