昨天接到了乙個活，裡面有乙個小需求，在寫的過程中遇到了乙個小問題。雖然這個問題並不是很複雜的東西，但卻是乙個比較細節的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。
需求很簡單的，乙個非常簡單的核取方塊的使用。你需要實現下面三個邏輯：
勾選「全國」，東區、南區、西區、北區都會被選中
取消勾選「全國」，東區、南區、西區、北區都會被取消選中
如果四個區域都被選中，則「全國」會被勾選，若四個區域有乙個未被勾選則「全選」不會被勾選
在處理這個需求的時候我首先想到當然回事jquery中的attr()方法啦！attr("checked",true)這樣一下就可以實現對核取方塊的控制，但是我在判斷的時候卻出現了兩個問題：
當核取方塊被勾選之後，用attr("checked")來獲取其狀態時卻返回undefined
當你還未對核取方塊進行任何勾選操作時，attr("checked",true)或者attr("checked",false)是有效的，但是進行完勾選操作之後，attr("checked",true)或者attr("checked",false)失效了
這兩個問題讓我非常疑惑不解。在我查閱資料之後，發現了其中原因，今天我們就扯一下jquery中attr()和prop()的區別，來解釋一下上面兩個問題出現的原因，另外這也是新手前端容易忽略的問題。
要想弄清楚jquery中attr()和prop()的區別，首先我們得弄明白attribute與property的區別。當我們弄清楚這兩個屬性之後，再過來理解jquery中attr()和prop()的區別就會很輕鬆。attribute與property這兩個屬性對於剛入行前端的同學們來說，是非常容易混淆的。這邊我自己總結一下，大概有有以下四點：
1.dom節點自帶的屬性既是attribute也是property，修改attribute或者property都可以使屬性變化
2.attribute和property自定義的屬性，相互之間是不能訪問的
3.attribute只支援string型別，而property是可以支援string、number以及boolean的
4.attribute的自定義屬性可以在innerhtml中檢視的，而property的自定義屬性卻是不可以在innerhtml中檢視的
看完上面這幾點總結，我相信還是有很多同學們並不能理解。所以我寫一些小案例，供同學們去體會attribute與property的區別。
核取方塊
1、當核取方塊被勾選之後，用attr("checked")來獲取其狀態時卻返回undefined
這裡我們注意的是，用attr()獲取的屬性，必須是你在dom節點上可以看見的屬性，看不見則會返回undefined。這裡我們可以驗證一下，當你使用attr("checked",true)之後，你會發現與之相對應的dom節點會新增乙個checked="checked"這麼一條屬性，你再用attr("checked")去獲取它的checked屬性的時候便會返回「checked」字串，這也就驗證了這句話。
用attr()獲取的屬性，必須是你在dom節點上可以看見的屬性，看不見則會返回undefined。針對dom節點上自己定義的屬性的，prop()是不能獲取的，而attr()是可以的，如果是標籤自帶的那便都能獲取。原因就在於我們前面總結attribute和property時，所提到的dom節點自帶的屬性既是attribute也是property。
2 、當你還未對核取方塊進行任何勾選操作時，attr("checked",true)或者attr("checked",false)是有效的，但是進行完勾選操作之後，attr("checked",true)或者attr("checked",false)失效了
在這裡我們需要弄清楚的一件事是attr("checked",true)和attr("checked",false)其實設定的不是checked屬性，而是defaultchecked屬性。而我們勾選和取消勾選這兩個操作才是改變checked屬性 ，這個相當於執行了prop("checked",true)或者prop("checked",false)這兩條語句。當我們未修改checked屬性時,核取方塊的勾選情況就是被defaultchecked這個屬性所控制，在我們修改了checked屬性之後，核取方塊的勾選情況將由checked屬性接管，defaultchecked這個屬性便失效了，除非你再重新整理一次頁面。
全國//記得引入jquery
在設定disabled、selected、checked等這些boolean型別自帶屬性時，我們需要用prop()方法；其他字串型別自帶屬性時，我們使用attr()方法即可;dom節點可見的自定義屬性我們也使用attr()方法。
jQuery中prop 和 attr 區別
prop 方法是在jquery1.6中新新增的。我們知道 attr checked 獲取checkbox的checked屬性時選中的時候可以取到值,值為 checked 但沒選中獲取值就是undefined。而現在使用prop方法獲取屬性則統一返回true和false。那麼具體的用法是什麼，以下是個...
jquery中attr 方法介紹和用法
在js中設定節點的屬性與屬性值用到setattribute 獲得節點的屬性與屬性值用到getattribute 而在jquery中，用乙個attr 就可以全部搞定了,贊乙個先 jquery中用attr 方法來獲取和設定元素屬性,attr是attribute 屬性 的縮寫，在jquery dom操作中...
jQuery中prop方法和attr方法的區別
舊版本的jqury用attr方法來設定或者獲取元素的屬性，但是存在bug，所以新版本在此基礎上推出了prop方法，現在推薦使用prop這個方法來幹這個事情。jquery在1.6以上的版本新增了乙個prop方法，這個方法和attr的作用很像，但各司其責。以上的版本用 selector prop che...