1、宽度和高度

(1):获取宽度

.width()

描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。

(2):设置宽度

.width( value )

描述:给每个匹配的元素设置CSS宽度。

2、高度

(1):获取高度

.height()

描述:获取匹配元素集合中的第一个元素的当前计算高度值。

  • 这个方法不接受任何参数。

(2):设置高度

 .height( value )

描述:设置每一个匹配元素的高度值。

2、innerHeight()和innerWidth()

(1):获取内部宽度

.innerWidth()

描述:为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border。

ps:这个方法不适用于window 和 document对象,对于这些对象可以使用.width()代替。

(2)设置内部宽

.innerWidth(value);

描述: 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)

(3):获取内部高

.innerHeight()

描述:为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

ps:这个方法不适用于window 和 document对象,对于这些对象可以使用.height()代替。

(4):设置内部高

.innerHeight(value);

描述: 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)

3、outWidth和outHeight

(1):获取外部宽

 .outerWidth( [includeMargin ] )

描述:获取匹配元素集合中第一个元素的当前计算外部宽度(包括padding,border和可选的margin)

  • includeMargin (默认: false)
    类型: Boolean
    一个布尔值,表明是否在计算时包含元素的margin值。
  • 这个方法不适用于window 和 document对象,可以使用.width()

(2):设置外部宽

 .outerWidth( value )

描述: 为匹配集合中的每个元素设置CSS外部宽度。

(3):获取外部高

 .outerHeight( [includeMargin ] )

描述:获取匹配元素集合中第一个元素的当前计算外部高度(包括padding,border和可选的margin)

  • includeMargin (默认: false)
    类型: Boolean
    一个布尔值,表明是否在计算时包含元素的margin值。
  • 这个方法不适用于window 和 document对象,可以使用.width()代替

(4):设置外部高

 .outerHeight( value )

描述: 为匹配集合中的每个元素设置CSS外部高度。

4、偏移

(1)获取

.offset()

返回值:Object 。.offset()返回一个包含top 和 left属性的对象 。

描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。

注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden,那么我们依然可以取得它的坐标

(2)设置

 .offset( coordinates )

描述: 设置匹配的元素集合中每一个元素的坐标, 坐标相对于文档。

  • coordinates
    类型: Object
    一个包含top 和 left属性的对象,用整数指明元素的新顶部和左边坐标。

例子:

$("p").offset({ top: 10, left: 30 });

5、元素坐标

 .position()

返回值:Object{top,left}

描述获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )

当把一个新元素放在同一个容器里面另一个元素附近时,用.position()更好用。

6、滚动距离

(1):水平方向

a、获取:

.scrollLeft()

描述:获取匹配的元素集合中第一个元素的当前水平滚动条的位置(页面卷走的宽度)

b、设置

.scrollLeft( value )

描述:设置每个匹配元素的水平方向滚动条位置。

(2):垂直方向

a、获取

.scrollTop()

描述:获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)

b、设置

.scrollLeft( value )

描述:设置每个匹配元素的垂直方向滚动条位置。

jQuery系列(八):jQuery的位置信息的更多相关文章

  1. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  2. 前端 -----jQuery的位置信息

    08-jQuery的位置信息   jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...

  3. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. jQuery的位置信息

    <head> <meta charset="UTF-8"> <title>jquery的位置信息</title> <style ...

  5. jquery获取元素在文档中的位置信息以及滚动条位置(转)

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  6. 获取元素位置信息和所占空间大小(via:js&jquery)

    工作中有一个很常见的需求,hover或者click某元素后,在该元素旁边出现弹框,主要就是获取该元素的位置坐标以及元素所占区块的大小.最近工作中就遇到了,发现js和jquery的实现方法有很大的区别, ...

  7. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  8. Jquery 系列(2) 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  9. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  10. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

随机推荐

  1. 第10章:深入浅出Ansible

    1.Ansible介绍 1).Ansible的优点 Ansible是一个简单的自动化引擎,可完成配置管理.引用部署.服务编排以及其他各种IT需求 Ansible是Python开发并实现的开源软件,其依 ...

  2. k8s之网络插件flannel及基于Calico的网络策略

    1.k8s网络通信 a.容器间通信:同一个pod内的多个容器间的通信,通过lo即可实现; b.pod之间的通信:pod ip <---> pod ip,pod和pod之间不经过任何转换即可 ...

  3. .Net C# EF database first connectionstring

    <connectionStrings> <add name="CupCreditCheckDB" connectionString="metadata= ...

  4. javascript中用&&跟||来简化if{}else{}的写法

    原文:javascript中用&&跟||来简化if{}else{}的写法 目录 javascript中用&&跟||来简化if{}else{}的写法 1. if else ...

  5. zepto学习(二)之tap事件以及tap事件点透处理

    前言 为什么通过touch可以触发click事件? touch事件的来源 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown.mouseup.mousemove和click ...

  6. koa 实现session登陆

    在我们访问一些网站内部内容的时候,通常都会先验证我们是否已经登陆,如果登陆了就跳转到内容页面否则就跳转或者弹出登陆页面. 但是HTTP协议是没有状态的协议,无法标识一个用户的登录状态. 于是Cooki ...

  7. python编程中常见错误

    python编程培训中常见错误最后,我想谈谈使用更多python函数(数据类型.函数.模块.类等)时可能遇到的问题.由于篇幅有限,我们试图将其简化,特别是一些高级概念.有关更多详细信息,请阅读学习py ...

  8. 分布式全局ID的几种生成方案

    前言 在互联网的业务系统中,涉及到各种各样的ID,如在支付系统中就会有支付ID.退款ID等. 那一般生成ID都有哪些解决方案呢?特别是在复杂的分布式系统业务场景中,我们应该采用哪种适合自己的解决方案是 ...

  9. kafka启动失败错误:: replica.fetch.max.bytes should be equal or greater than message.max.bytes

    1 详细异常 2019-10-14 14:38:21,260 FATAL kafka.Kafka$: java.lang.IllegalArgumentException: requirement f ...

  10. Hadoop_21_MapReduce程序实现Join功能

    1.序列化与Writable接口 1.1.hadoop的序列化格式 序列化和反序列化就是结构化对象和字节流之间的转换,主要用在内部进程的通讯和持久化存储方面 hadoop在节点间的内部通讯使用的是RP ...