jQuery prop()

admin發表於2017-02-16
jQuery

此方法獲取匹配的元素集中第一個元素的屬性（property）值或設定每一個匹配元素的一個或多個屬性。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.prop(propertyName)

引數解析:

propertyName:要獲取值的屬性名稱。

獲取匹配的元素集中第一個元素的屬性（property）值。

如果元素上沒有該屬性，或者如果沒有匹配的元素。那麼該方法會返回undefined值

jQuery1.6版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.prop(propertyName, value)

引數解析:

（1）.propertyName:要設定值的屬性（properties）的名稱。

（2）.value:要設定的屬性值。

設定所有匹配元素的屬性（properties）值。

jQuery1.6版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.prop(properties)

引數解析:

properties:一個包含屬性/屬性值對的物件。

設定所有匹配元素的屬性（properties）值。

jQuery1.6版本新增。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
.prop(propertyName, function(index, oldPropertyValue))

引數解析:

（1）.propertyName:要設定值的屬性名。

（2）.function:返回屬性值的函式。index：可選，當前元素在匹配元素集合中的索引值（從0開始），oldValue：可選，當前元素的屬性值（被重置之前的值）。函式中的this指向當前元素。

設定所有匹配元素的屬性值。

jQuery1.6版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{
  list-style:none;
}   
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    alert($("input[type='checkbox']").prop("checked"));
  })
})
</script>
</head>
<body>
<ul>
  <li><input type="checkbox" checked="checked" value="1"/></li>
  <li><input type="checkbox" value="2" /></li>
</ul> 
<input type="button" id="bt" value="檢視演示"/>  
</body>
</html>

以上程式碼可以返回核取方塊中集合中，第一個核取方塊的checked屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{
  list-style:none;
}   
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("input[type='checkbox']").prop("checked","true");
  })
})
</script>
</head>
<body>
<ul>
  <li><input type="checkbox" checked="checked" value="1"/></li>
  <li><input type="checkbox" value="2" /></li>
</ul> 
<input type="button" id="bt" value="檢視演示"/>  
</body>
</html>

設定所有匹配的核取方塊為選中狀態。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("td").prop({
      width: "100",
      height: "500"
    });
  })
})
</script>
</head>
<body>
<table border="1">
<tr>
  <td>螞蟻部落</td>
</tr>
</table>
<input type="button" id="bt" value="檢視演示"/>  
</body>
</html>

以上程式碼可以設定td的寬度和高度。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  height:100px;
  line-height:100px;
  width:150px;
  text-align:center;
  background-color:#ccc;
}
.reset{
  color:blue;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("div").prop("class" ,function(){
      return "reset"
    })
  })
})
</script>
</head>
<body>
<div>螞蟻部落</div>
<input type="button" id="bt" value="檢視演示"/>  
</body>
</html>

通過函式返回元素要設定的屬性值。

相關文章