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