08-jQuery的位置信息

jQuery的位置信息跟JS的client系列,offset系列,scroll系列封装好的一些api

一, 宽度和高度

获取宽度

.width()

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

 

设置宽度

.width(value)

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

 

高度

获取高度

.height()

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

　　这个方法不接受任何参数

设置高度

.height(value)

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

 

2, innerHeight()和innerWidth()

获取内部宽度

.innerWidth

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

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

 

设置内部宽

.innerWidth(value)

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

 

获取内部高度

.inneerHeight()

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

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

 

设置内部宽

.innerHeight(value);

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

 

3,outWidht和outHeight

获取外部宽

.outWidth([includeMargin])

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

　　includeMargin(默认: false)

　　类型: Boolean

　　一个布尔值, 表明是否在计算时包含元素的margin值

　　这个方法不适用于window和document对象,可以使用.widht()代替

 

设置外部宽

.outWidth(value)

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

 

获取外部宽

.outerHeight([includeMargin])

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

　　includeMargin(默认false)

　　类型: Boolean

　　一个布尔值, 表明时候在计算时包含元素的margin值

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

 

设置外部高

.outHeight(value)

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

 

3,偏移

获取

.offset()

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

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

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

 

设置

.offset(coordinates)

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

　　coordinates

　　类型: Object

　　一个包含top和left属性的对象,用整数指明元素的新顶部和左边坐标.

例子:

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

 

4,元素坐标

.position()

返回值: Object{top, left}

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

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

 

5, 滚动举例

水平方向

获取:

.scrollLeft()

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

 

设置:

.scrollLeft(value)

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

 

垂直方向

获取:

.scrollTop()

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

 

设置:

.scrollLeft(value)

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