.prop()
Contents:
-
prop( propertyName )
- .prop( propertyName )
-
prop( propertyName, value )
- .prop( propertyName, value )
- .prop( map )
- .prop( propertyName, function(index, oldPropertyValue) )
.prop( propertyName ) 返回： String
描述： 獲取在匹配的元素集中的第一個(gè)元素的屬性值。
-
version added: 1.6.prop( propertyName )
propertyName要得到的屬性的名稱
.prop()方法只獲得第一個(gè)匹配元素的屬性值 。元素的一個(gè)屬性沒有設(shè)置，或者如果沒有匹配的元素。它返回undefined值。為了讓每個(gè)元素單獨(dú)的值，使用一個(gè)循環(huán)結(jié)構(gòu)的如jQuery .each()或.map()方法。
attributes和properties之間的差異在特定情況下是很重要。jQuery 1.6之前 ，.attr()方法有時(shí)檢索時(shí)考慮到了一些屬性的屬性值，這可能導(dǎo)致不一致的行為。在jQuery 1.6， .prop()方法提供了一種明確檢索屬性值，同時(shí).attr()檢索的屬性而已。
例如，考慮一個(gè)DOM元素的HTML標(biāo)記中定義的<input type="checkbox" checked="checked" /> ，并假設(shè)它是一個(gè)JavaScript變量命名的elem ：
elem.checked |
true (Boolean) |
|---|---|
$(elem).prop("checked") |
true (Boolean) |
elem.getAttribute("checked") |
"checked" (String) |
$(elem).attr("checked")(1.6+)
|
"checked" (String) |
$(elem).attr("checked")(pre-1.6)
|
true (Boolean) |
根據(jù)W3C的表單規(guī)范 ，在checked屬性是一個(gè)布爾屬性，這意味著如果屬性相應(yīng)的屬性就為真，例如，屬性沒有值或空字符串值。首選的跨瀏覽器兼容的方法來確定一個(gè)復(fù)選框被選中的是檢查一個(gè)“truthy”的元素的使用以下一個(gè)屬性值：
if ( elem.checked )if ( $(elem).prop("checked") )if ( $(elem).is(":checked") )
另一方面，代碼if ( $(elem).attr("checked") )，將獲得一個(gè)屬性 ，它不改變?cè)搹?fù)選框被選中和選中。它只是用來存儲(chǔ)默認(rèn)或選中屬性的初始值。
其他注意事項(xiàng):
- 在Internet Explorer之前的版本9，使用
.prop()設(shè)置DOM元素的屬性值以外的任何一個(gè)簡(jiǎn)單的原始（數(shù)字，字符串或布爾）如果DOM元素之前從文檔中不刪除該屬性（使用.removeProp()),可能導(dǎo)致內(nèi)存泄漏。為了安全地設(shè)置對(duì)象無泄漏內(nèi)存值對(duì)DOM，使用.data()
Example:
Checked屬性顯示一個(gè)復(fù)選框，因?yàn)樗淖兓蛯傩浴?
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 20px 0 0 }
b { color: blue; }
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$("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>
</body>
</html>Demo:
.prop( propertyName, value ) 返回： jQuery
描述： 設(shè)置為匹配的元素設(shè)置一個(gè)或更多的屬性。
-
version added: 1.6.prop( propertyName, value )
propertyName要設(shè)置的屬性的名稱
value一個(gè)值來設(shè)置屬性值。
-
version added: 1.6.prop( map )
map一個(gè)用于設(shè)置的對(duì)象 {屬性:值} 對(duì) .
-
version added: 1.6.prop( propertyName, function(index, oldPropertyValue) )
propertyName要設(shè)置的屬性的名稱
function(index, oldPropertyValue)用來設(shè)置返回值的函數(shù)。接收到集合中的元素和屬性的值作為參數(shù)舊的索引位置。在函數(shù)中，關(guān)鍵字
this指的是當(dāng)前元素。
.prop()方法是一種方便的方式來設(shè)置屬性的函數(shù)值，尤其是當(dāng)設(shè)置多個(gè)屬性或通過使用返回值。一般在不影響性能的改變屬性的序列化的HTML DOM元素的動(dòng)態(tài)。例子包括value屬性的input元素， disabled屬性的inputs和按鈕，或checked屬性的復(fù)選框。大多數(shù)情況下， .prop()應(yīng)該用于設(shè)置 disabled 和 checked，而不是.attr()方法。.val()方法應(yīng)該用于獲取值。
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
還要注意的是.removeProp()方法不應(yīng)該被用來設(shè)置這些屬性為false。一旦本地財(cái)產(chǎn)被刪除，不能再次添加。見.removeProp()獲取更多信息。
其他注意事項(xiàng)：
- 在Internet Explorer之前的版本9，使用
.prop()設(shè)置DOM元素的屬性值以外的任何一個(gè)簡(jiǎn)單的原始（數(shù)字，字符串或布爾）如果DOM元素之前從文檔中不刪除該屬性（使用.removeProp()),可能導(dǎo)致內(nèi)存泄漏。為了安全地設(shè)置對(duì)象無泄漏內(nèi)存值對(duì)DOM，使用.data()
Example:
禁用頁面上的所有復(fù)選框。
<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<script>
$("input[type='checkbox']").prop({
disabled: true
});
</script>
</body>
</html>