项目中的prop()的attr()的jQuery大坑

浏览: 153 发布日期: 2016-11-05 分类: jquery

说起来惭愧,在现在React横行的年代,自己还在大学的项目里面用jQuery慢慢磨。大一的时候深受《锋利的jQuery》的影响,一直都觉得jQuery是一个特别 Niubility 的框架。当然!这只不过是开个玩笑,受项目制约,我还是得认真研究下这个jQuery。

项目中遇到的程序的Bug

以为这个东西非常简单

首先我的项目要做一个全选复选框的功能:列表项有多个复选框,当列表头的复选框的选择了之后,列表中的所有的复选框不管是否已经选择都必须全部选择。而当列表头的复选框取消了选择,所有的列表复选框也必须取消选择。

看似很简单的功能呢。我们知道在复选框中,只要添加了 checked 属性,就算他里面是" "这样的空值,但是都是选中的。

那就用jQuery的attr()来进行实现吧,将checkbox的 checked 属性变成 checked 值。首先我们来实现全选的功能

        if ($(".contentRightListGroupBanderListInput").attr("checked")) {
            $("input[name=items]:checkbox").attr('checked', true);
        }

结果

结果发现:根本没有反应诶亲!而且如果用了FireBug进行调试,发现if的语句内部根本就进不去啊!

利用Firefox进行调试,发现checked属性的确是true,但是都是进不去if语句。

并且我还发现一个更加严重的问题,怎么做全不选的功能,利用hasAttr()来判断是否有checked属性吗?这样如果没有选中的话,就会返回一个undefined,这个恐怖的东西是我们不想见到的。

翻阅一切资料找到的prop()方法

在jQuery 1.6之后,就开始推荐利用prop()方法来部分替代attr()方法了。利用prop()方法的好处,特别是在处理单选复选框的时候,利用prop()代替attr()会更好。

因为prop()在判断checked只会返回true和false,有这个checked属性返回true,没有就返回false,这样有利于我们判断。但attr()返回都是我们自己定义属性值,例如在 checked 属性中,虽然只要有这属性,选框都是选中,但是他返回的是值,也就不管你里面的值是checked true 还是空值都会返回给你,如果没有checked属性还会返回undefined,简直乱麻。

利用prop方法来判断是否选中的简单代码:

    if ($(".contentRightListGroupBanderListInput").prop("checked") == true) {
            $("input[name=items]:checkbox").prop('checked', true);
        }
        if ($(".contentRightListGroupBanderListInput").prop("checked") == false) {
            $("input[name=items]:checkbox").prop('checked', false);
        }

这样单纯的利用truefalse来判断就可以轻松解决用attr()属性解决不了的问题。

什么时候应该用prop()什么时候用attr()呢

其实如果说prop()只是在checked中有大作用那就错了

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();

prop()就是专门为这两个来使用的,例如disabled checked selected

那么在其他情况之下就使用attr就可以完成几乎所有功能了。特别是在自定义属性中,还是一定要用attr()的,因为你定义的属性值可能连你自己都不知道你在定义什么,哈哈,开玩笑。总之,自己定义的属性一定要用attr()。

返回顶部