Jquery中的offset()和position()深入剖析

2016-02-19 16:00 4 1 收藏

下面图老师小编要跟大家分享Jquery中的offset()和position()深入剖析，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！

【 tulaoshi.com - Web开发】

先看看这两个方法的定义。
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
真的就这么简单吗？实践出真知。
先来看看在jquery框架源码里面，是怎么获得position()的：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）代码如下:
// 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
};

点击下面的页面可以测试一下两个的区别：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titleoffset和position测试1/title script type="text/javascript" src="http://img.poluoluo.com/jslib/jquery/jquery-1.3.2.js"/script style type="text/css" body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } .child{ background:#666; width:200px; height:200px; color:#fff; } .copyright{ position:absolute; right:0; } /style script type="text/javascript" $(document).ready(function(){ $(".child").each(function(){ var text = "position().left="+$(this).position().left; text +="brposition().top="+$(this).position().top; text +="broffset().left="+$(this).offset().left; text +="broffset().top="+$(this).offset().top; text +="br其parent的offset().top="+$(this).parents(".parent").offset().top; text +="br其parent的offset().left="+$(this).parents(".parent").offset().left; $(this).html(text); }); }); /script /head body div class="parent" style="float:right" 父容器的position是默认值，也就是static,子容器的position为默认值，也是static,这个时候，offset和position值相同brbrbr div class="child"/div /div div style="clear:both"/div br div class="parent" style="position:relative" 父容器的position是相对定位，也就是ralative,子容器的position为默认值，也是static,这个时候，offset和position值不同 div class="child"/div /div br div style="position:absolute;padding:15px;border:3px solid #ff0000;" div class="parent" 父容器的position是绝对定位，也就是absolute,子容器的position为默认值，也是static,这个时候，offset和position值不同 div class="child"/div /div /div div class="copyright"a href="http://www.playgoogle.com"©playgoogle.com/a/div /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
通过test1页面测试的结果可以得出这个结论：
使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移
知道了这些特点，我们应该如何来合理的使用position()和offset()呢？
就我个人的经验，通常获取一个元素（A）的位置是为了让另外的一个元素（B）正好出现在A元素的附近。通常有2种情况：
1.要显示的元素B存放在DOM的最顶端或者最底端（即其父元素就是body）.这个时候用offset()是最好的。示例验证：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
用position无法正常显示的例子

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
在以上两个例子中，元素B都存放在Dom 结构的最下面，由于其父元素就是BODY，所以，不管元素A如何定位，只要找的A相当与整个窗口的偏移位置，就可以解决问题。

2.若要显示的元素B存放在元素A的同一父元素下（即B为A的兄弟节点），这个时候使用position() 是最合适的。
用offset 正常显示的例子

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titleoffset和position测试1/title script type="text/javascript" src="http://img.poluoluo.com/jslib/jquery/jquery-1.3.2.js"/script style type="text/css" body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } input{ height:25px; float:right; } .copyright{ position:absolute; right:0; } .tip{ border:3px dotted #669900; background:#eee; width:200px; position:absolute; display:none; } /style script type="text/javascript" $(document).ready(function(){ $("input").bind("click",function(){ $(".tip").css({ left:$(this).position().left+"px", top:$(this).position().top+25+"px" }); $(".tip").toggle(); }); }); /script /head body 用position, 该例中元素B在button按钮的附近，也就是，元素B和button按钮有共同的父容器 div class="parent" style="position:absolute;left:150px" 父元素是绝对定位的 input type="button" value="点击我，正好在我的下面显示元素B，且左边和我对齐" div class="tip" 我是元素Bbr 现在用的是position， 我和按钮的父亲元素相同br 我能按要求正常显示 /div /div brbrbrbrbrbrbrbr /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
用offset五法正常显示的例子

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titleoffset和position测试1/title script type="text/javascript" src="http://img.poluoluo.com/jslib/jquery/jquery-1.3.2.js"/script style type="text/css" body{margin:15px;width:960px;} .parent{ border:3px solid #ccc; width:600px; height:300px; margin-left:55px; padding:25px; } input{ height:25px; float:right; } .copyright{ position:absolute; right:0; } .tip{ border:3px dotted #669900; background:#eee; width:200px; position:absolute; display:none; } /style script type="text/javascript" $(document).ready(function(){ $("input").bind("click",function(){ $(".tip").css({ left:$(this).offset().left+"px", top:$(this).offset().top+25+"px" }); $(".tip").toggle(); }); }); /script /head body 用offset, 该例中元素B在button按钮的附近，也就是，元素B和button按钮有共同的父容器 div class="parent" style="position:absolute;left:150px" 父元素是绝对定位的 input type="button" value="点击我，正好在我的下面显示元素B，且左边和我对齐" div class="tip" 我是元素Bbr 现在用的是offset， 我和按钮的父亲元素相同 我无法按要求正常显示 /div /div brbrbrbrbrbrbrbr /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
综上所述，应该使用position()还是offset()取决于你被控制的元素B DOM所在的位置。

来源:http://www.tulaoshi.com/n/20160219/1610872.html

上一篇：如何清理笔记本键盘
下一篇： hotfixinstaller.exe是什么进程？

看过《Jquery中的offset()和position()深入剖析》的人还看了以下文章更多>>

Jquery中的offset()和position()深入剖析 02-19
数组和指针的区别深入剖析 02-19
[原创教程]深入剖析CorelDRAW中的位图功能 01-28
深入剖析JSP和Servlet对中文的处理 01-29
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,oute 02-19
重载函数的应用与深入剖析 02-19
深入剖析C#继承机制 02-19
全局静态存储区、堆区和栈区深入剖析 02-19
深入剖析Windows XP的BOOT.INI 01-29
Excel Offset函数计算斜对角的和 03-31

java自动装箱拆箱深入剖析

标签：编程语言网络编程

这个是jdk1.5以后才引入的新的内容，作为秉承发表是最好的记忆，毅然决定还是用一篇博客来代替我的记忆： java语言规范中说道：在许多情况下包装与解包装是由编译器自行完成的（在这种情况下包装成为装箱，解包装称为拆箱）；其实按照我自己的理解自动装箱就可以简单的理解为将基本数据类型封装为对象类型，来符合java的面向对象；例如用int...

CSS教程:CSS中的定位（position）

标签： Web开发

使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。其实，要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。 CSS中关于定位...

深入剖析64位WindowsXP操作系统

标签： windows 操作系统

Windows版本简要介绍 Windows是我们日常使用最多的操作系统，也是世界范围内应用最广泛的客户端操作系统。对于国内用户来说，最初认识Windows可能是从Windows 3.x开始的，而自从Windows 95发布之后，Windows在国内的普及率达到了一个新的高度。我们一般使用的（以及曾经使用过的）客户端Windows，按照发布时间排列，主...

Java中HashMap和TreeMap的区别深入理解

标签：编程语言网络编程

首先介绍一下什么是Map。在数组中我们是通过数组下标来对其内容索引的，而在Map中我们通过对象来对对象进行索引，用来索引的对象叫做key，其对应的对象叫做value。这就是我们平时说的键值对。 HashMap通过hashcode对其内容进行快速查找，而 TreeMap中所有的元素都保持着某种固定的顺序，如果你需要得到一个有序的结果你就应该使用TreeMap（Has...

锋利的jQuery jQuery中的DOM操作

标签： Web开发

1 查找元素节点 var $x = $("selector").text() 2 查找属性节点 var $x = $("selector").attr("property") 3 创建节点 var $x = $("html") 4 插入节点 $("selector").append() 向每个匹配的元素内部追加内容 $("selector").appendTo() 等价于.append()操作符左右互换 $("selector").prepend() 向每个匹配的元素内部前置内...

查看更多精彩>>