<原文地址:http://blog.sina.com.cn/s/blog_995c1f630101ad3v.html>
在jQuery中有两个获取元素位置的方法offset()和position()。position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢?
先看看API对这这两个方法的定义:
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
真的就这么简单吗?实践出真知。
先来看看在jQuery框架源码里面,是怎么获得position()的:
//Get *real* offsetParent var offsetParent = this.offsetParent(), //Get correct offsets offset = this.offset(), parentOffset = /^body|html$/i.test(offsetParent[0].tagName)? { top: 0, left: 0 }: offsetParent.offset(); //Subtract element margins //note: when an element has margin: auto the offsetLeft and marginLeft //are the same in Safari causing offset.left to incorrectly be 0 offset.top -= num( this, 'marginTop' ); offset.left -= num( this, 'marginLeft' ); //Add offsetParent borders parentOffset.top += num( offsetParent, 'borderTopWidth' ); parentOffset.left += num( offsetParent, 'borderLeftWidth' ); //Subtract the two offsets results = { top: offset.top - parentOffset.top, left: offset.left - parentOffset.left };
注意最后那段 代码:意思就是获取本身元素距离它的父元素的距离。在没有position()方法之前,计算B到A的距离 只有通过先计算B距浏览器左边距减去 A的。
有了position()方法之后,就可以快速计算出来。不过在使用position()之前需要了解下定位方式。
结论:
- 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
- 使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移。
- 使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
进一步那么我们应该如何来合理的使用position()和offset()呢? 就我个人的经验,通常获取一个元素A的位置是为了让另外的一个元素B正好出现在A元素的附近。通常有2种情况:
- 要显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的。由于其父元素就是BODY,所以,不管元素A如何定位,只要找的A相当与整个窗口的偏移位置,就可以解决问题。
- 若要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的。
那么我现在问你,如果我打算做一个跟随屏幕滚动的层,使用哪个方法呢?
如果你答得是:offset(),那么恭喜你。
如果我打算做一个类似于幻灯片的效果,你会使用哪个方法呢?
综上所述,使用position()还是offset()取决于你被控制的元素B元素 DOM所在的位置。
相关推荐
理解Jquery 的offset与position方法
先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对... 先来看看在jquery框架源码里面,是怎么获得position()的: 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /
本文实例分析了Jquery中offset()和position()的区别。分享给大家供大家参考。具体分析如下: 一、Jquery中offset() 获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的...
jQuery.API源码深入剖析以及应用实现
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
jQuery中文乱码完美解决方案解决方案
使用JQuery实现从JSON对象转换为form提交数据
jQuery计算时间差 计算相差年月日周时分秒和阳历阴历转换
本压缩包内包含以下文件: jquery-1.12.4.js jquery-1.12.4.min.js jQuery1.11.0_20140330.chm jQueryAPI_CHM.CHM
jquery1.8.0 和jquery 1.8 中文 api
非常详细的jquery文档,其全称是锋利的jquery
jQuery API 1.4.4 中文参考手册.chm,jquery api 下载,jQuery 1.4.4 API 参考文档中文版.rar,jQuery最新版CHM下载,jQuery中文参考手册,jQuery中文版1.4.4参考手册,jQuery 1.4.4 速查表,jQuery中文参考手册,jQuery中文...
jQuery xml-to-json xml转JSON jQuery实现xml转JSON插件 有demo和相关文档
资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...
整理出来的汉字转拼音的jQuery插件,所以我把这个jq版本的发给你们看看,如果符合发布要求,就分享给大家下载使用。
浏览器中实现文本转语音功能,让你得应用瞬间高大上起来
《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...
jQuery中文参考手册