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 面向对象编程 万物皆对象
Sep 17 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php内核解析:PHP中的哈希表
2014/01/30 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
Using the TextRange Object
2006/10/14 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
js验证密码强度解析
2020/03/18 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python对文件操作知识汇总
2016/05/15 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
浅谈对yield的初步理解
2017/05/29 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python取余运算符知识点详解
2019/06/27 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
贫民窟的百万富翁观后感
2015/06/09 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Android自定义双向滑动控件
2022/04/19 Java/Android