項目中的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()。