关于jQuery中的offset()和position()
在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
};
注意最后那段 代码: results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};代码的意思就是获取本身元素距离它的父元素的距离。
用图如下所示:
也就是元素B距离元素A的距离。
在没有position()方法之前,计算B到A的距离 只有通过 先计算B距浏览器左边距 减去 A的。
有了position()方法之后,就可以快速计算出来。不过在使用position()之前,你需要了解一
下它们的定位方式。
可以看一下测试例子1: 点击这里浏览例子l
通过例子1页面测试的结果可以得出这个结论:
1,使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
2,使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移。
3,使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
知道了这些特点后,相信你对它们已经熟悉了。进一步那么我们应该如何来合理的使用position()和offset()呢?
就我个人的经验,通常获取一个元素A的位置是为了让另外的一个元素B正好出现在A元素的附近。通常有2种情况:
1,要显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的。
示例验证:
用offset 正常显示的例子 : 点击查看例子2
用position无法正常显示的例子 : 点击查看例子3
在以上两个例子中,元素B都存放在Dom 结构的最下面,由于其父元素就是BODY,所以,不管元素A如何定位,只要找的A相当与整个窗口的偏移位置,就可以解决问题。
2,若要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的。
用position正常显示的例子 :点击查看例子4
用offset五法正常显示的例子:点击查看例子5
那么我现在问你,如果我打算做一个跟随屏幕滚动的层,使用哪个方法呢?
如果你答得是:offset(),那么恭喜你。
如果我打算做一个类似于幻灯片的效果,你会使用哪个方法呢?
综上所述,使用position()还是offset()取决于你被控制的元素B DOM所在的位置。
关于jQuery中的offset()和position()的更多相关文章
- Jquery中的offset()和position()深入剖析(元素定位)
先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...
- Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
- 区分jquery中的offset和position
一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...
- Jquery中的offset()和position()
今天遇到这个偏移量的问题,特做此记录.以便日后查看. 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见 ...
- jquery 中的 offset()
一.语法: 1.返回偏移坐标 $(select).offset(); top: $(select).offset().top; left: $(select).offset().left; 2.设 ...
- jquery中使用offset()获得的div的left=0,top=0
写东西的时候要获取div的left和top,但怎么也取不到值都为0,但在chrome的console下是可以取到值的, 瞬间就纳闷了,于是乎就在网上找各种方法,大家一般的问题可能都是要获取的div被隐 ...
- js和JQuery中offset等属性对比
HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
随机推荐
- HTML5 云知梦自觉,记录知识 点
第一章(1--3) 文档类型:<!doctype html> 网站代码结构:<html> <head> <meta charset="UTF-8&q ...
- Oracle Schema Objects——Tables——TableType
Oracle Schema Objects Object Tables object type An Oracle object type is a user-defined type with a ...
- Android WebView 加载网页
通过Android 中 WebView 控件加载HTML5 页面,这是实现Android 混合开发的基础. 选择加载的网页可以是本地,也可用使远程的.需要添加访问互联网的权限:<uses-per ...
- django之contenttype
平时开发过程中,我们会经常遇到这么一个类似的场景,比如 不同的课程,有不同的价格策略 不同的课程可使用不同的优惠券(满减券,通用券,专用券) 不同的评论区,支持的评论 就拿 不同的课程,有不同的价格 ...
- oracle入门(4)——少而常用的命令
[本文介绍] 本文将介绍使用oracle的常用命令,不是”大全“,但少而实用. 下面的命令都是在项目用到的才记录下来的,如果以后用到其他的,会不断更新. [命令介绍] 描述: 命令: [数据库] ...
- Kotlin 初级读本
第一部分——快速上手第一章·启程 第二章·基本语法第三章·Kotlin 与 Java 混编 第二部分——开始学习 Kotlin第四章·Kotlin 的类特性(上)第四章·Kotlin 的类特性(下)第 ...
- zz Qt下 QString转char*和char []
以下内容为转载:http://www.cnblogs.com/Romi/archive/2012/03/12/2392478.html -------------------------------- ...
- beego——模型定义
复杂的模型定义不是必须的,此功能用作数据库数据转换和自动建表 默认的表名规则,使用驼峰转蛇形: AuthUser -> auth_user Auth_User -> auth__user ...
- Python高阶函数-闭包
高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 在这里我们首先回忆一下python代码运行的时候遇到函数是怎么做的. 从python解释器开始执行之后,就在内存中开辟了一个空间 每当 ...
- php采集
采集思路 采集程序的思路很简单大体可以分为以下几个步骤: 1. 获取远程文件源代码(file_get_contents或用fopen). 2.分析代码得到自己想要的内容(这里用正则匹配,一般 ...