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的类型简单说明
Sep 03 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
使用angular写一个hello world
Jan 23 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
Vuex简单入门
Apr 19 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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获取MAC地址的函数代码
2011/09/11 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
jQuery Ajax全解析
2017/02/13 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
js实现菜单跳转效果
2020/12/11 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python使用matplotlib绘制折线图教程
2017/02/08 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
详解Python装饰器
2019/03/25 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python中doctest库实例用法
2020/12/31 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
寒假家长评语大全
2014/04/16 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
职位证明模板
2015/06/23 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
SQL Server 中的事务介绍
2022/05/20 SQL Server