jQuery的位置信息

  jQuery 的位置信息是JS的 client系列 , offset系列 , scroll系列 封装好的一些简单的api.css

    一 . 宽度和高度      

  宽度           

    1 . 获取宽度     api

.width()

   描述 : 为匹配的元素集合中获取第一个元素的当前计算宽度值.这个方法不接受任何参数. spa

.css(width) 和 .width() 之间的区别是后者返回一个没有单位的数值(例如 : 400),前者返回带有完整单位的字符串(例如 : 400px). 当一个元素的宽度须要数学计算的时候推荐使用 .width()方法.code

    2 .  设置宽度            对象

.width(value)

   描述 : 给每一个匹配的元素设置css宽度.blog

  高度                

   1 . 获取高度文档

.height()

     描述 : 获取匹配元素集合中的第一个元素的当前计算高度值. 不接受任何参数.字符串

   2 . 设置高度get

.height(value)

    描述 :设置每个匹配元素的高度值数学

 

二 . innerHeight() 和 innerWidth()   

     1 . 获取和设置内部宽 

         ● 获取内部宽 : 

.innerWidth()

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

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

  ● 设置内部宽

.innerWidth(value);

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

    2 . 获取和设置内部高

  ● 获取内部高

.innerHeight()

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

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

  ● 设置内部高

.innerHeight(value); 

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

 

三 . outerWidth() 和 outerHeight()       

 1 . 获取和设置外部宽

  ● 获取外部宽

 .outerWidth( [includeMargin ] )

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

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

  ● 设置外部宽

 .outerWidth( value )

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

    2 . 获取和设置外部高

  ● 获取外部高

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

 

五 . 元素坐标

 .position()

返回值:Object{top,left}

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

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

 

六 . 滚动距离

    1 . 水平距离 

  ● 获取     

.scrollLeft()

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

  ● 设置     

.scrollLeft( value )

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

    2 . 垂直距离

  ● 获取     

.scrollTop()

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

  ● 设置     

.scrollLeft( value )

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