边读边写,不正确的地方,还请各位告诉我,多多交流共同学习,PDF下载地址在最后。
17. 坐标和尺寸 Offset & Dimensions
初学者经常会迷惑于jQuery的提供的获取/设置坐标和尺寸接口的差异,不知道在什么情况下该使用什么接口,现将接口和差异整理如下:
?
l? 坐标 Offset
?
接口 |
公式 |
说明 |
.offset() |
相对于文档document的坐标 |
返回或设置匹配元素相对于文档的偏移(位置),返回的对象包含两个整形属性:top和left,以像素计。此方法只对可见元素有效。 设置时可以接受带有left和top属性的对象,或函数,使用函数来设置所有匹配元素的偏移坐标。 隐藏元素、window、document无效 |
.offsetParent() |
取到最近的父节点 |
不是坐标接口 |
.position() |
相对于父元素parent的坐标 |
返回匹配元素相对于父元素的位置(偏移)。该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。 .position()把元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对absolute或者相对定位relative的父元素的偏移位置。使用.position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移 只能获取,没有设置接口 对隐藏元素、window、document无效 |
.scrollLeft() .scrollTop() |
滚动条的水平和垂直位置 |
获取或设置滚动条的水平和垂直位置。 对可见或隐藏元素都有效,对window、document有效 对非容器型元素无效 |
?
l? 尺寸 Demensions(结合后边的图一起理解)
?
接口 |
公式 |
说明 |
.width(), .height() |
content |
获取或设置匹配元素的高度、宽度,如果不为该方法设置参数,则返回第一个匹配元素的高度、宽度(单位是像素,整型值,不带单位) 对可见和隐藏元素都有效 |
.innerWidth() .innerHeight() |
content+padding |
只能获取,没有设置接口(单位是像素,整型值,不带单位) 对window、document无效,用.width()/.height()代替 |
.outerWidth() .outerHeight() |
content+padding+border (+可选的margin) |
只能获取,没有设置接口(单位是像素,整型值,不带单位) 对window、document无效,用.width()/.heigth()代替 |
?
?
?
懒了,只翻译了官网API