jQuery中prop()方法用法執行個體，jqueryprop

最後更新：2015-01-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了jQuery中prop()方法用法。分享給大家供大家參考。具體分析如下：

此方法可以擷取或者設定匹配元素的屬性值。
根據方法參數的不同，作用也有所不同。

文法結構一:
當參數為屬性名稱時，此方法能夠匹配元素集合中，第一個匹配元素指定屬性名稱的屬性值。
複製代碼代碼如下:$("selector").prop(name)

參數列表:

參數	描述
name	定義要擷取其值的屬性名稱。

執行個體代碼:

執行個體一:

複製代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.bkjia.com/" />
<title>prop()函數-幫客之家</title>
<style type="text/css">
ul{
list-style:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(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>
</body>
</html>

以上代碼可以返回被選中的checkbox的屬性值。

執行個體代碼二:

複製代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.bkjia.com/" />
<title>prop()函數-幫客之家</title>
<style type="text/css">
ul{
list-style:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("li").prop("id"));
})
</script>
</head>
<body>
<ul>
<li>幫客之家歡迎您</li>
<li id="mytest"><input type="checkbox" checked="checked" value="1" /></li>
<li id="second"><input type="checkbox" value="2" /></li>
</ul>
</body>
</html>

以上代碼中，由於li元素集合中第一個li元素並沒有id屬性，所以傳回值為空白。

文法結構二:

以屬性的“名/值對”對象方式設定所有匹配元素的屬性值。
複製代碼代碼如下:$(selector).prop(properties)

參數列表:

參數	描述
attribute:value	定義屬性名稱/值對

執行個體代碼:

執行個體一:

複製代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.bkjia.com/" />
<title>prop()函數-幫客之家</title>
<style type="text/css">
ul{
list-style:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='checkbox']").prop({disabled:true})
})
</script>
</head>
<body>
<ul>
<li><input type="checkbox" value="1" /></li>
<li><input type="checkbox" value="2" /></li>
</ul>
</body>
</html>

以上代碼能夠將選中所有複選框。

執行個體二:

複製代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.bkjia.com/" />
<title>prop()函數-幫客之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td").prop({width:"200",height:"300"});
})
</script>
</head>
<body>
<table border="1">
<tr>
<td>歡迎來到幫客之家</td>
</tr>
</table>
</body>
</html>

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

文法三:

以屬性名稱/值對方式設定所有匹配元素的屬性值。
複製代碼代碼如下:$(selector).prop(key,value)

參數列表:

參數	描述
key	定義要設定值的屬性名稱。
value	定義要設定的屬性值。

執行個體代碼:

複製代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.bkjia.com/" />
<title>prop()函數-幫客之家</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:1px solid blue
}
.font{
font-size:18px;
color:yellow
}
.bg{
background:#336;
}
.reset{
color:green;
font-size:20px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("div").prop("class","reset");
})
})
</script>
</head>
<body>
<div class="font bg">幫客之家歡迎您</div>
<button id="btn">點擊查看效果</button>
</body>
</html>

以上代碼可以為div設定指定的樣式。

文法結構四:

通過函數傳回值設定屬性值。
複製代碼代碼如下:$(selector).prop(name,function(index,oldvalue))

參數列表:

參數	描述
name	定義要設定值的屬性的名稱。
function(index,oldvalue)	定義返回屬性值的函數 index - 可選，接受選取器的索引位置。 class - 可選，接受選取器的當前的屬性值。

執行個體代碼:

複製代碼代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.bkjia.com/" />
<title>prop()函數-幫客之家</title>
<style type="text/css">
div{
height:200px;
width:200px;
border:1px solid blue
}
.font{
font-size:18px;
}
.bg{
background:#336;
color:red;
}
.reset{
font-size:20px;
color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
    $("div").prop("class" ,function(){
      return "reset"
    })
})
})
</script>
</head>
<body>
<div class="font bg">幫客之家歡迎您</div>
<button id="btn">點擊查看效果</button>
</body>
</html>

以上代碼可以為div設定指定的樣式。

希望本文所述對大家的jQuery程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery中prop()方法用法執行個體，jqueryprop

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support