Jquery中offset()和position()的区别分析


Posted in Javascript onFebruary 05, 2015

本文实例分析了Jquery中offset()和position()的区别。分享给大家供大家参考。具体分析如下:

一、Jquery中offset()

获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
 
例如:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { margin-left:10px; } 
</style> 
<script src="js/jquery.js"></script> 
</head> 
<body> 
 <p>Hello</p><p>2nd Paragraph</p> 
<script>
var p = $("p:last"); 
var offset = p.offset(); 
p.html( "left: " + offset.left + ", top: " + offset.top );
</script> 
</body> 
</html>

二、Jquery中position()

获取匹配元素相对父元素的偏移。 更通俗一点,含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到这样的父元素或祖先元素,那么会计算相对于文档(即视区左上角)的位置. 返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。

例如:

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
 div { padding: 15px;} 
 p { margin-left:10px; } 
 </style> 
 <script src="jquery脚本URL"></script> 
</head> 
<body> 
<div> 
 <p>Hello</p> 
</div> 
<p></p> 
<script> 
var p = $("p:first"); 
var position = p.position(); 
$("p:last").text( "left: " + position.left + ", top: " + position.top ); 
</script> 
</body> 
</html>

三、offset()和position()的区别
 
1、offset()方法获取匹配元素在当前窗口的相对偏移量。这里的窗口指的是当前页面的窗口,不包括浏览器的菜单栏等,当然我们也不太需要使用jquery来控制整个浏览器,我们所要控制的是页面窗口。

2、position()方法获取匹配元素相对父元素的偏移量。即获取的是该元素相对于最近的一个拥有绝对定位或者相对定位的父元素的偏移量。如果所有的父元素都是默认的static定位方式,则其处理方式和offset()一样,是当前窗口的偏移量。

3、使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

4、使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。

5、一般情况下,如果要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;如果显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
使用JS读秒使用示例
Sep 21 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
javascript实现倒计时效果
Feb 17 Javascript
JS实现一个按钮的方法
Feb 05 #Javascript
JS继承用法实例分析
Feb 05 #Javascript
Javascript实现Web颜色值转换
Feb 05 #Javascript
JS表的模拟方法
Feb 05 #Javascript
JS的数组迭代方法
Feb 05 #Javascript
js实现照片墙功能实例
Feb 05 #Javascript
js实现仿百度瀑布流的方法
Feb 05 #Javascript
You might like
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
js中eval详解
2012/03/30 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
vue二级路由设置方法
2018/02/09 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python模块future用法原理详解
2020/01/20 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
项目经理岗位职责
2013/11/11 职场文书
教育技术职业规划范文
2014/03/04 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
快餐公司创业计划书
2014/04/29 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
个人典型事迹材料
2014/12/30 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
个人业务学习心得体会
2016/01/25 职场文书
MySQL锁机制
2021/04/05 MySQL
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏