jQuery中prop()方法用法實(shí)例
更新時(shí)間：2015年01月05日 10:24:06 投稿：shichen2014
這篇文章主要介紹了jQuery中prop()方法用法,以實(shí)例形式較為詳細(xì)的分析了prop()方法的功能、定義及獲取或者設(shè)置匹配元素屬性值的各種常見使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery中prop()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以獲取或者設(shè)置匹配元素的屬性值。
根據(jù)方法參數(shù)的不同，作用也有所不同。
語法結(jié)構(gòu)一:
當(dāng)參數(shù)為屬性名稱時(shí)，此方法能夠匹配元素集合中，第一個(gè)匹配元素指定屬性名稱的屬性值。
復(fù)制代碼 代碼如下:
$("selector").prop(name)
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>prop()函數(shù)-腳本之家</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的屬性值。
實(shí)例代碼二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>prop()函數(shù)-腳本之家</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元素集合中第一個(gè)li元素并沒有id屬性，所以返回值為空。
語法結(jié)構(gòu)二:
以屬性的“名/值對(duì)”對(duì)象方式設(shè)置所有匹配元素的屬性值。
復(fù)制代碼 代碼如下:
$(selector).prop(properties)
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>prop()函數(shù)-腳本之家</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>
以上代碼能夠?qū)⑦x中所有復(fù)選框。
實(shí)例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>prop()函數(shù)-腳本之家</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>
以上代碼可以設(shè)置td的寬度和高度。
語法三:
以屬性名/值對(duì)方式設(shè)置所有匹配元素的屬性值。
復(fù)制代碼 代碼如下:
$(selector).prop(key,value)
參數(shù)列表:
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>prop()函數(shù)-腳本之家</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">點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼可以為div設(shè)置指定的樣式。
語法結(jié)構(gòu)四:
通過函數(shù)返回值設(shè)置屬性值。
復(fù)制代碼 代碼如下:
$(selector).prop(name,function(index,oldvalue))
參數(shù)列表:
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>prop()函數(shù)-腳本之家</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">點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼可以為div設(shè)置指定的樣式。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery獲取自定義屬性(attr和prop)實(shí)例介紹
- jquery中prop()方法和attr()方法的區(qū)別淺析
- js與jquery實(shí)時(shí)監(jiān)聽輸入框值的oninput與onpropertychange方法
- jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
- jquery下onpropertychange事件的綁定方法
- Jquery阻止事件冒泡 event.stopPropagation
- jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
- jQuery中attr()和prop()在修改checked屬性時(shí)的區(qū)別
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- 詳解jQuery中的prop()使用方法
相關(guān)文章
淺談jQuery hover(over, out)事件函數(shù)
下面小編就為大家?guī)硪黄獪\談jQuery hover(over, out)事件函數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個(gè)，用來在線生成二維碼2013-08-08
jQuery制作簡潔的多級(jí)聯(lián)動(dòng)Select下拉框
省市多級(jí)聯(lián)動(dòng)的select下拉框有很多種實(shí)現(xiàn)方式，度娘上隨便一搜就一大堆，今天我們來討論的這款特效，代碼卻很簡潔，兼容性也非常棒，推薦給大家。2014-12-12
要實(shí)現(xiàn)這樣的一個(gè)功能復(fù)選框勾選時(shí)給input表單賦值，復(fù)選框取消時(shí)將表單值清除，需要的朋友可以參考下2014-05-05
基于jquery的劃詞搜索實(shí)現(xiàn)（備忘）
最近，需要做個(gè)劃詞搜索功能。在網(wǎng)上找了好些，最后，參照進(jìn)行修改，實(shí)現(xiàn)了想要的功能。這里，做個(gè)記錄，以備日后所用。2010-09-09
瀏覽者是否對(duì)網(wǎng)站感興趣，前20秒的第一印象至關(guān)重要，所以我們的設(shè)計(jì)要符合大眾的期望。下面我們將設(shè)計(jì)一個(gè)個(gè)性的導(dǎo)航菜單。2009-12-12
jquery 提示信息顯示后自動(dòng)消失的具體實(shí)現(xiàn)
讓提示信息顯示后自動(dòng)消失的方法有很多，在本文為大家介紹下使用jquery是如何做到的，感興趣朋友可以參考下2013-12-12
今天抽時(shí)間給大家整理jquery和ajax的相關(guān)知識(shí)
jquery ajax2015-11-11
對(duì)于想學(xué)習(xí)制作jquery 插件的朋友需要用的到。2008-12-12
Ben最近在負(fù)責(zé)一個(gè)購書網(wǎng)站，在網(wǎng)站的首頁上，有一個(gè)叫做“最新上架”的板塊，板塊的內(nèi)容比較簡單，只有書籍名稱，作者姓名和上架時(shí)間（如圖），當(dāng)初設(shè)計(jì)的時(shí)候并i沒有過于豐富的構(gòu)思2010-10-10