[原创] jQuery源码分析-17坐标和尺寸 Offset & Dimensions
2011-09-25 22:55
316 查看
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有效 对非容器型元素无效 |
接口 | 公式 | 说明 |
.width(), .height() | content | 获取或设置匹配元素的高度、宽度,如果不为该方法设置参数,则返回第一个匹配元素的高度、宽度(单位是像素,整型值,不带单位) 对可见和隐藏元素都有效 |
.innerWidth() .innerHeight() | content+padding | 只能获取,没有设置接口(单位是像素,整型值,不带单位) 对window、document无效,用.width()/.height()代替 |
.outerWidth() .outerHeight() | content+padding+border (+可选的margin) | 只能获取,没有设置接口(单位是像素,整型值,不带单位) 对window、document无效,用.width()/.heigth()代替 |
关于jQuery中的offset()和position() http://www.jz123.cn/text/2134435.html
jQuery 参考手册 - CSS 操作 http://www.w3school.com.cn/jquery/jquery_ref_css.asp
深入剖析Jquery中的offset()和position() http://www.l99.com/EditText_view.action?textId=55129
相关文章推荐
- [原创] jQuery源码分析-17坐标和尺寸-Offset&Dimensions
- jQuery源码分析-17尺寸和大小 Dimensions & Offset
- [原创] jQuery源码分析-04 选择器-Sizzle-设计思路
- jQuery源码分析之offset,position,offsetParent方法以及源码中常见的cssHooks,swap代码
- [原创] jQuery源码分析-04 选择器-Sizzle-块分割器chunker(有图有真相)
- [原创] jQuery源码分析-12 DOM操作-Manipulation-核心函数jQuery.buildFragment()
- [原创] jQuery源码分析-12 DOM操作-Manipulation-核心函数jQuery.clean()
- [原创] jQuery源码分析-13 CSS操作-CSS-样式表-jQuery.fn.css()
- jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理续(伪类选择器“PSEUDO”和子伪类选择器"CHILD"原子选择器详解)
- [原创] jQuery源码分析-04 选择器-Sizzle-从左向右的余热
- [原创] jQuery源码分析-11 DOM遍历-Traversing-3个核心函数
- [原创] jQuery源码分析-11 DOM遍历-Traversing-DOM遍历方法
- [原创] jQuery源码分析-如何做jQuery源码分析(更新)
- jQuery1.11源码分析(3)-----Sizzle源码中的浏览器兼容性检测和处理[原创]
- [原创] jQuery源码分析-04 选择器-Sizzle-工作原理
- [原创] jQuery源码分析-13 CSS操作-CSS-类样式-addClass+removeClass+toggleClass+hasClass
- jQuery1.11源码分析(4)-----Sizzle工厂函数[原创]
- [原创] jQuery源码分析-12 DOM操作-Manipulation-核心函数.domManip()
- jQuery源码分析17--回调函数
- jQuery1.11源码分析(2)-----Sizzle源码中的正则表达式[原创]