從is(":checked")說起

*此文所用jQuery版本應大於1.6.1

 

如何判斷一個單選（復選）框是否選中。

對於剛接觸jQuery的人，第一反應必然是。

<input id="checkbox1" type="checkbox" checked>
<input id="checkbox2" type="checkbox>

$("#checkbox1").attr("checked") // checked
$("#checkbox2").attr("checked") // undefined

無論是否選中，返回的值一直是 checked 。(至於為什么返回的是checked，那是因為checked屬性對應的值只有checked這一個，所以寫什么checked=false，checked="true",checked="unchecked" 這些是毫無意義的。都等同於checked="checked"，可以參考文檔 input標簽)

 

回到正題，我們希望的結果肯定是，如果選中了就返回true，沒選中就返回false。

如果對jQuery比較熟悉，一般會這么處理

<input id="checkbox1" type="checkbox" checked>
<input id="checkbox2" type="checkbox>

$("#checkbox1").is(":checked") // true
$("#checkbox2").is(":checked") // false

用is方法傳入:checked偽類選擇器，解決了這個問題。但是，為什么第一種方法不行呢？

 

 

 

二、HTML元素屬性 和 DOM節點屬性

會造成上面問題的疑問，主要原因是一個html元素，有兩種類型屬性（不知道這樣說是否准確，但是個人認為比較好理解）

 

一種是DOM節點屬性，讀取它的方法就是 attr() 方法，拿個input來說

<input id="checkbox1" type="checkbox" checked data-custom='customattribute'>

這個input有的4個dom節點屬性 id、type、checked、data-custom。

所以通過attr方法可以拿到這4個屬性的值（值和html中寫的一樣，其中checked的值就是checked，原因上面已解釋）

如果你寫不存在的屬性，返回的就會是undefined。

 

第二種是HTML元素屬性，這種屬性你看不到，但是確實存在，而且大部分情況和DOM節點屬性對應的值一樣。

在jQuery中取得這種值的方法是 prop();

看下這個例子就明了了

<input id="checkbox1" type="checkbox" checked data-custom='customattribute'>

$("#checkbox1").prop("id") //checkbox1
$("#checkbox1").prop("type") //checkbox
$("#checkbox1").prop("checked") //true
$("#checkbox1").prop("data-custom") // undefined 自定義的DOM節點屬性用取HTML元素屬性的方法是取不到的

id和type和attr方法返回的一樣。但是checked方法返回的值就不一樣了，因為DOM節點屬性可以理解為靜態的，當頁面渲染完，checked屬性就確定了，就是checked。而HTML元素屬性是動態的，隨時可以改變，而且對於checked這個屬性，對應的值是true或者false。

 

同理，a標簽的href屬性，用prop和attr取出來的也有可能不一樣。attr取出的和看到的一樣，prop取出的會是完整路徑

<a id="a" href="test.html" class="csstest" style="font-size: 30px;">link</a>

$("#a").attr("href") // test.html
$("#a").prop("href") // "file:///E:/jquery/test.html"

所以，回到最開始的問題。

自然而然有另外一種解決方法

<input id="checkbox1" type="checkbox" checked>
<input id="checkbox2" type="checkbox>

$("#checkbox1").prop("checked") // true
$("#checkbox2").prop("checked") // false

 

現在，這個問題應該已經很明了了。不過attr和prop不僅支持讀取屬性的操作，還支持寫入屬性的操作，我簡單測試了下，發現在寫入方面，attr和prop似乎差別不大。應該是jQuery做了兼容吧。

 

 

 

三、從原生Javascript看根本區別

簡而言之把。attr相當於 Element.getAttribute / Element.setAttribute 而 prop相當於 Element['name'] / Element.name 這樣。

就好比 

<a id="a" href="test.html" class="csstest" style="font-size: 30px;">link</a>

document.getElementById("a").getAttribute("style")  // font-size: 30px;
document.getElementById("a").style // CSSStyleDeclaration {0: "font-size", parentRule: null, length: 1, cssText: "font-size: 30px;", alignContent: "", alignItems: ""…}   一種瀏覽器定義的對象

 

 

轉載本站文章請注明作者和出處 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，請勿用於任何商業用途