jQuery中width()方法用法实例
更新时间：2014年12月24日 14:20:44 投稿：shichen2014
这篇文章主要介绍了jQuery中width()方法用法,以实例形式较为详细的分析了width()方法获取元素宽度的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery中width()方法用法。分享给大家供大家参考。具体分析如下：
此方法可以获取或者设置匹配元素的宽度值，默认单位是px。
语法结构一:
复制代码 代码如下:
$(selector).width()
不带参数的时候是返回第一个匹配元素的当前宽度。
实例代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.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>
语法结构二:
复制代码 代码如下:
$(selector).width(val)
带参数的时候是设置所有匹配元素的宽度，默认单位是px，当然也可以使用其他的单位如em或者百分比等等。
实例代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.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>后台专区</li>
<li>前台专区</li>
<li>数据库专区</li>
<li>站长交流</li>
</ul>
</div>
<div>当前li元素的位置:<span>0</span></div>
<button id="btn">点击查看实例</button>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jquery和js分别可以实现对div的隐藏和显示，方法也不一样，jquery的show、show;js的hidden、visible2014-09-09
升级了IE10，发现flexigrid无法显示数据，提示获取到了数据，但没任何报错任何显示,经过试验和跟踪，修改如下，有类似问题的朋友可以参考下哈2013-07-07
对博客系统已经做到了博客评论模块部分了，对单篇博文进行静态化的同时对博文的评论部分采取AJAX的方式去读取。2009-11-11
父级以及同级元素的查找在使用过程中还是蛮频繁的，下面为大家介绍下jQuery是如何实现的，感兴趣的朋友可以参考下2013-09-09
jquery插件uploadify实现带进度条的文件批量上传
这篇文章主要介绍了jquery插件uploadify实现带进度条的文件批量上传，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了JQuery中Ajax()的data参数类型,结合实例形式较为详细的分析了ajax方法中data的具体类型,需要的朋友可以参考下2015-12-12
本文给大家介绍jquery easyui实现动态树，本文通过代码实例相结合的方式给大家展示jquery easyui实现动态树的过程，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了jquery实现垂直无限轮播的方法,结合实例形式分析了jQuery无限轮播相关界面布局、样式与页面元素动态操作实现技巧,需要的朋友可以参考下2019-07-07
jqGrid可以结合fancybox等插件完成超酷的弹出层效果，通过与php后台交互，可以轻松完成数据的添加与详情查看，而这个过程完全是一个ajax异步通信过程，是一个非常友好的富客户端应用，本文给大家介绍jqGrid表格应用之新增与删除数据，需要的朋友参考下2015-12-12
这篇文章主要为大家详细介绍了基于jQuery的时间戳与日期间的转化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
最新评论