项目中的prop()的attr()的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);
        }

这样单纯的利用true和false来判断就能够轻松解决用attr()属性解决不了的问题。

何时应该用prop()何时用attr()呢

其实若是说prop()只是在checked中有大做用那就错了

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

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

那么在其余状况之下就使用attr就能够完成几乎全部功能了。特别是在自定义属性中，仍是必定要用attr()的，由于你定义的属性值可能连你本身都不知道你在定义什么，哈哈，开玩笑。总之，本身定义的属性必定要用attr()。