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实现unicode和字符的互相转换
Jul 18 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php的ajax简单实例
2014/02/27 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
分页栏的web标准实现
2011/11/01 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
微信小程序排坑指南详解
2018/05/23 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python面向对象之类的封装操作示例
2019/06/08 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
销售主管的自我评价分享
2014/01/03 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
事务机电主管工作职责
2014/02/25 职场文书
公司股东合作协议书
2014/09/14 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
话题作文之呼唤
2019/12/18 职场文书
python tqdm用法及实例详解
2021/06/16 Python
javascript函数式编程基础
2021/09/15 Javascript