jQuery的位置信息

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

        width()
        height()

        innerWidth()
        innerHeight()

        outerWidth()
        outerHeight()

        offset().top()
        offset().left()
        offset({top:xxx,left:xxx})
      
        scrollTop()
        scrollLeft()

一、宽度和高度

1、宽度

　　（1）获取内容宽度

.width()      //获取内容宽度

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

　　（2）设置内容宽度

.width(400)   //设置内容宽度，直接400即可，不需要加 px

2、高度

　　（1）获取高度

.height()  //获取匹配元素集合中的第一个元素的当前计算高度值,这个方法不接受任何参数

　　（2）设置高度

.height( 400 )  //设置每一个匹配元素的高度值。不需要加 px

二、innerWidth()和innerHeight()

1、innerWidth()

　　（1）获取内部宽

.innerWidth()   // 内容宽 + padding

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

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

　　（2）设置内部宽

.innerWidth(400);

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

2、innerHeight()

　　（1）获取内部高

.innerHeight()

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

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

　　（2）设置内部高

.innerHeight(400);

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

三、outerWidth()和outerHeight()

1、outerWidth()

　　（1）获取外部宽

 .outerWidth()   // 内容宽 + padding + margin

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

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

　（2）设置外部宽

 .outerWidth( value )

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

2、outerHeight()

　　（1）获取外部高

.outerHeight()   // 内容高 + padding + margin

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

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

　　（2）设置外部高

 .outerHeight( value )

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

四、偏移

　　（1）获取偏移量（相对于文档页面的坐标）

.offset()　　//获取到的是对象，包括到左边和顶部的距离
.offset().top()　　//获取具体的到顶部的值
.offset().left()　　//获取具体的到左边的值

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

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

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

　　（2）设置偏移量的值

$("p").offset({ top: 10, left: 30 });  //无需添加 px

五、坐标元素

 .position()

　　返回值：Object{top,left}

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

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

六、滚动(scroll)距离

1、水平方向

.scrollLeft()　　//获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）

.scrollLeft( value )　　//设置每个匹配元素的水平方向滚动条位置,直接数字即可，不需要PX

2、垂直方向

.scrollTop()　　//获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）

.scrollLeft( value )　　//设置每个匹配元素的垂直方向滚动条位置。

案例：回到顶部

posted @ 2018-10-08 10:19 葡萄想柠檬 Views(107) Comments(0) 收藏举报

刷新页面返回顶部

葡萄想柠檬

jQuery的位置信息