jQuery中width()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery中width()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以获取或者设置匹配元素的宽度值,默认单位是px。

语法结构一:

$(selector).width()

不带参数的时候是返回第一个匹配元素的当前宽度。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<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://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
BootStrap中
Dec 10 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
jQuery中animate()方法用法实例
Dec 24 #Javascript
jQuery中fadeOut()方法用法实例
Dec 24 #Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
jQuery中slideUp()方法用法分析
Dec 24 #Javascript
node.js开机自启动脚本文件
Dec 24 #Javascript
使用jquery动态加载js文件的方法
Dec 24 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
nodejs集成sqlite使用示例
2017/06/05 NodeJs
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python中的super()方法使用简介
2015/08/14 Python
python动态加载包的方法小结
2016/04/18 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python中count函数简单的实例讲解
2020/02/06 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
顶岗实习计划书
2015/01/16 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
《迟到》教学反思
2016/02/24 职场文书
导游词之任弼时故居
2020/01/07 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA