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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
JS严格模式知识点总结
Feb 27 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
javascript 常用功能总结
2012/03/18 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
python链接Oracle数据库的方法
2015/06/28 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
西班牙手机之家:Phone House
2018/10/18 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
小学推普周活动总结
2015/05/07 职场文书