jQuery中width()方法用法實(shí)例
更新時(shí)間：2014年12月24日 14:20:44 投稿：shichen2014
這篇文章主要介紹了jQuery中width()方法用法,以實(shí)例形式較為詳細(xì)的分析了width()方法獲取元素寬度的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery中width()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以獲取或者設(shè)置匹配元素的寬度值，默認(rèn)單位是px。
語(yǔ)法結(jié)構(gòu)一:
復(fù)制代碼 代碼如下:
$(selector).width()
不帶參數(shù)的時(shí)候是返回第一個(gè)匹配元素的當(dāng)前寬度。
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
text-align:center;
line-height:150px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").text($("div").width())
})
</script>
</head>
<body>
<div></div>
</body>
</html>
語(yǔ)法結(jié)構(gòu)二:
復(fù)制代碼 代碼如下:
$(selector).width(val)
帶參數(shù)的時(shí)候是設(shè)置所有匹配元素的寬度，默認(rèn)單位是px，當(dāng)然也可以使用其他的單位如em或者百分比等等。
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>CSS教程</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert($("li").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺(tái)專區(qū)</li>
<li>前臺(tái)專區(qū)</li>
<li>數(shù)據(jù)庫(kù)專區(qū)</li>
<li>站長(zhǎng)交流</li>
</ul>
</div>
<div>當(dāng)前l(fā)i元素的位置:<span>0</span></div>
<button id="btn">點(diǎn)擊查看實(shí)例</button>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
jquery和js分別可以實(shí)現(xiàn)對(duì)div的隱藏和顯示，方法也不一樣，jquery的show、show;js的hidden、visible2014-09-09
jquery的flexigrid無(wú)法顯示數(shù)據(jù)提示獲取到數(shù)據(jù)
升級(jí)了IE10，發(fā)現(xiàn)flexigrid無(wú)法顯示數(shù)據(jù)，提示獲取到了數(shù)據(jù)，但沒(méi)任何報(bào)錯(cuò)任何顯示,經(jīng)過(guò)試驗(yàn)和跟蹤，修改如下，有類似問(wèn)題的朋友可以參考下哈2013-07-07
對(duì)博客系統(tǒng)已經(jīng)做到了博客評(píng)論模塊部分了，對(duì)單篇博文進(jìn)行靜態(tài)化的同時(shí)對(duì)博文的評(píng)論部分采取AJAX的方式去讀取。2009-11-11
父級(jí)以及同級(jí)元素的查找在使用過(guò)程中還是蠻頻繁的，下面為大家介紹下jQuery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
jquery插件uploadify實(shí)現(xiàn)帶進(jìn)度條的文件批量上傳
這篇文章主要介紹了jquery插件uploadify實(shí)現(xiàn)帶進(jìn)度條的文件批量上傳，感興趣的小伙伴們可以參考一下2015-12-12
JQuery中Ajax()的data參數(shù)類型實(shí)例分析
這篇文章主要介紹了JQuery中Ajax()的data參數(shù)類型,結(jié)合實(shí)例形式較為詳細(xì)的分析了ajax方法中data的具體類型,需要的朋友可以參考下2015-12-12
Jquery easyui 實(shí)現(xiàn)動(dòng)態(tài)樹(shù)
本文給大家介紹jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹(shù)，本文通過(guò)代碼實(shí)例相結(jié)合的方式給大家展示jquery easyui實(shí)現(xiàn)動(dòng)態(tài)樹(shù)的過(guò)程，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery實(shí)現(xiàn)垂直無(wú)限輪播的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)垂直無(wú)限輪播的方法,結(jié)合實(shí)例形式分析了jQuery無(wú)限輪播相關(guān)界面布局、樣式與頁(yè)面元素動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07
jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)附源碼下載
jqGrid可以結(jié)合fancybox等插件完成超酷的彈出層效果，通過(guò)與php后臺(tái)交互，可以輕松完成數(shù)據(jù)的添加與詳情查看，而這個(gè)過(guò)程完全是一個(gè)ajax異步通信過(guò)程，是一個(gè)非常友好的富客戶端應(yīng)用，本文給大家介紹jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)，需要的朋友參考下2015-12-12
基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化
這篇文章主要為大家詳細(xì)介紹了基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06