08-jQuery的位置信息

jQuery的位置信息跟JS的client系列、offset系列、scroll系列封装好的一些简便api.

 

1、宽度和高度

获取宽度

.width()

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

设置宽度

.width( value )

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

 

高度

获取高度

.height()

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

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

设置高度

 .height( value )

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

 

二、innerHeight()和innerWidth()

获取内部宽

.innerWidth()

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

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

 

设置内部宽

.innerWidth(value);

描述： 为匹配集合中的每一个元素设置CSS内部宽度。若是这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

 

 

获取内部高

.innerHeight()

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

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

 

设置内部宽

.innerHeight(value);

描述： 为匹配集合中的每一个元素设置CSS内部高度。若是这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

 

3.outWidth和outHeight()

 

获取外部宽

 .outerWidth( [includeMargin ] )

描述：获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）

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

设置外部宽

 .outerWidth( value )

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

 

获取外部宽

 .outerHeight( [includeMargin ] )

描述：获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）

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

设置外部高

 .outerHeight( value )

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

 

 

三、偏移

获取

.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 )

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