jQuery中attr()和prop()在修改checked属性时的区别

 更新时间:2014年07月18日 10:17:20   投稿:whsnow  
使用语句$.attr('checked',true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题

在做复选框全选按钮的时候,出现了一个问题,使用语句$.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版本后新增。

网上关于其他类似属性的图表:

另外关于在IE9之前版本中,如果property没有在DOM元素被移除之前删除,使用.prop()方法设置DOM元素property(简单类型除外:number、string、boolean)的值会导致内存泄露。为了安全的设置DOM对象的值,避免内存泄露,可以使用.data()方法。 目前尚未遇到,先记在这里。

相关文章

  • Jquery从头学起第四讲 jquery入门教程

    Jquery从头学起第四讲 jquery入门教程

    今天主要讲如何给主要的控件赋值,因为在做网站的时候,很多时候需要初始化表单,所有给控件赋值就成必然的了。
    2010-08-08
  • jQuery实现表格冻结顶栏效果

    jQuery实现表格冻结顶栏效果

    昨天晚上公司遇到个小需求,就是实现类似表格冻结顶栏的效果。这篇文章主要介绍了jQuery实现表格冻结顶栏效果 ,需要的朋友可以参考下
    2017-08-08
  • jquery 遍历hash操作示例【基于ajax交互】

    jquery 遍历hash操作示例【基于ajax交互】

    这篇文章主要介绍了jquery 遍历hash操作,结合实例形式分析了jQuery基于ajax交互获取并遍历hash相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • jquery果冻抖动效果实现方法

    jquery果冻抖动效果实现方法

    这篇文章主要介绍了jquery果冻抖动效果实现方法,涉及animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • jQuery子属性过滤选择器用法分析

    jQuery子属性过滤选择器用法分析

    这篇文章主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下
    2015-02-02
  • jquery事件重复绑定的快速解决方法

    jquery事件重复绑定的快速解决方法

    本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jQuery实现自动滚动到页面顶端的方法

    jQuery实现自动滚动到页面顶端的方法

    这篇文章主要介绍了jQuery实现自动滚动到页面顶端的方法,涉及jQuery针对页面操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • jQuery实现点击行选中或取消CheckBox的方法

    jQuery实现点击行选中或取消CheckBox的方法

    这篇文章主要介绍了jQuery实现点击行选中或取消CheckBox的方法,涉及jQuery针对页面元素的循环遍历与属性操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • jquery实现漂亮的二级下拉菜单代码

    jquery实现漂亮的二级下拉菜单代码

    这篇文章主要介绍了jquery实现漂亮的二级下拉菜单代码,涉及jquery鼠标click事件控制页面class属性动态变换效果的切换技巧,非常美观实用,需要的朋友可以参考下
    2015-08-08
  • jquery属性,遍历,HTML操作方法详解

    jquery属性,遍历,HTML操作方法详解

    下面小编就为大家带来一篇jquery属性,遍历,HTML操作方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论