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 相关文章推荐
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
vue.js的简单自动求和计算实例
Nov 08 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
ionic3 懒加载
2017/08/16 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
向领导表决心的话
2014/03/11 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
小学老师寄语大全
2014/04/04 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
中学教师教学工作总结
2015/08/13 职场文书
文明礼仪主题班会
2015/08/13 职场文书
800字作文之大雪
2019/12/04 职场文书