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 分页控件实现代码
Nov 30 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
Three.js基础部分学习
2017/01/08 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
Python for i in range ()用法详解
2020/09/18 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
英语道歉信范文
2014/01/09 职场文书
税务会计岗位职责
2014/02/18 职场文书
大学生工作自荐书
2014/06/16 职场文书
大学生求职信
2014/06/17 职场文书
外贸英文求职信范文
2015/03/19 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫