jQuery屬性篇-prop

.prop( propertyName )

獲取第一個匹配元素property的值

.prop(propertyName)

propertyName

類型是字符串。

用來獲取屬性的名字。

.prop()方法僅僅獲取第一個匹配的元素的property值。如果一個屬性的值沒有被設定或者沒有匹配的元素就返回undefined。給了能獨立的獲取每一個元素，使用循環結構如jQuery中的 .each()或者.map()方法。

在特定的場合下，attribute和properties的不同之處十分重要。在jQuery1.6之前，.當使用attr()方法獲取attributes的時候，也會考慮獲取property的值，這些會引起不一致的行爲。在jQuery1.6中.prop()方法會提供一種嚴格的方式獲取property，.attr()用來獲取attribute。

比如，selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked, 和defaultSelected應該被使用.prop()方法獲取和設置。在jQuery1.6版本之前，這些properties是通過.attr()方法獲取的，但是這不在attr的範圍內。他們沒有對應的attributes，只是properties.（譯者注：理解attributes是有對應可以設置的值的屬性，properties是不可變的屬性，如有固定的布爾值等）

關於boolean屬性，如下被html標記定義的DOM元素<input type="checkbox" checked="checked" />，並假設它是在javascript的變量名爲elem：

 

根據W3c的表單的規範，checked屬性是boolean類型的屬性，意思是如果checked這個屬性存在，其相應的屬性值就爲true.即使,這個屬性沒有值或者是一個空的字符串。首選的跨瀏覽器兼容的方式來決定一個checkbox是否被check，是在元素屬性上檢查一個“truthy”的值，如下：

•if ( elem.checked )
•if ( $(elem).prop("checked") )
•if ( $(elem).is(":checked") )

如果使用jQuery1.6,代碼if ( $(elem).attr("checked") )將獲取真實attribute的內容，這個內容不會隨着checkbox選中和不選中而改變。這就意味着，只是存儲checked默認或者最初的property。爲了解決向後兼容問題，在jQuery1.6+中的.attr()方法將爲你獲取和更新property，因此對於boolean類型的attributes就不需要改變原來的代碼到.prop()方法中。不過，首選的獲取checked值的方法是通過上述列出來的操作。

附加：在IE9之前的版本中，使用.prop()來給DOM元素的property設置除了簡單原始（number, string, or boolean的值）的任何其他值，如果該property沒有在DOM元素被從文檔中移除之前被移除（使用.removeProp()來移除），會引起內存泄漏。爲了安全的設置DOM對象上的值，而不會引起內存泄漏，可以使用.data().

.prop( propertyName, value )

爲匹配的元素設置一個或多個properties

.prop(propertyName,value)

.prop(properties)

.prop(propertyName,fuction(index,oldPropertyValue))

propertyName

類型是字符串。

用來設置的屬性名字。

value

類型是字符串，數字，布爾值

設置屬性的值。

properties

類型是普通對象。

一個用來設置的屬性-值對的對象。

function(index,oldPropertyValue)

類型是函數。

一個函數返回用於設置的值。接收集合中元素的index的位置和原來的屬性值做爲參數。在這個函數中，關鍵字this指向的是當前的元素。

.prop()方法是一個方便的方式來設置properties，特別是當設置多個properties的時候，使用函數返回的值或者同時設置多個元素上的值。當設置selectedIndex,tagName,nodeName,nodeType,ownerDocument,defaultChecked, ordefaultSelected的時候應該使用它。jQuery1.6+版本中，這些值就不再使用.attr()方法來設置。他們沒有對應的attributes，只是properties。

properties一般影響DOM元素的狀態時，不會改變序列化的HTML的attribute。在下面的DEMO中包含了input元素的property值，input和button的disabled屬性，或者checkbox的checked屬性。.prop()方法應該代替.attr()方法來設置disabled和checked。.val()方法應該被用來設置和獲取值。

$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");

重要：.removeProp()方法不應該被用來將這些properties設置成false。一旦這個本地的property被移除，就不能被再次添加。查看.removeProp()獲取更多的信息。

計算屬性值

使用函數設置properties，你能夠根據該元素上的其他properties計算出值。比如，基於checkbox自身的值做來切換。

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

Note:如果函數沒有返回值（function(index, prop){}），或者返回undefined，現在的值不會改變。當一些條件滿足的時候，有選擇的設置很有用。

.removeProp( propertyName )

移除匹配元素的一個property

.removeProp(propertyName)

propertyName

類型是字符串。

用於移除的屬性的名字。

.removeProp()方法移除通過.prop()方法設置的properties。

對於一些DOM元素或window對象的內置properties，如果嘗試移除這些property時，瀏覽器也許會報錯。jQuery首先給這些property分配undefined值，並且忽略瀏覽器的錯誤。一般，只需要移除設置在對象上的自定義的properties，而不是內置（本地）的properties。

NOTE：不要使用這個方法來移除本地properties，如checked, disabled, or selected。property會被完全的移除，一旦移除，就不能夠再被添加到元素上了。可以使用.prop()設置這些properties爲false來做代替.

<script>
//當checkbox改變時，演示它的checked的property和attitude
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>

<script>
//disable 這個頁面上的所有checkbox
 $("input[type='checkbox']").prop({
  disabled: true
});
</script><span class="desc"><span style="font-size: 14px;">Set a numeric property on a paragraph and then remove it.</span></span>

<script>
//在一個段落上設置數字的屬性，然後移除它
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
</script>