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 相关文章推荐
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
理解javascript封装
Feb 23 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
微信小程序实现留言功能
Oct 31 Javascript
javascrpt密码强度校验函数详解
Mar 18 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
用文本作数据处理
2006/10/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
继续学习javascript闭包
2015/12/03 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
详解Vue之计算属性
2020/06/20 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
起诉意见书范文
2015/05/19 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL