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类中获取外部函数名的方法与代码
Sep 12 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
javascript使用canvas实现饼状图效果
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
一棵php的类树(支持无限分类)
2006/10/09 PHP
劣质的PHP代码简化
2010/02/08 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
javascript的事件描述
2006/09/08 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python带参数打包exe及调用方式
2019/12/21 Python
python之随机数函数的实现示例
2020/12/30 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
化工专业应届生求职信
2013/11/08 职场文书
元旦联欢会感言
2014/03/04 职场文书
私人委托书格式
2014/09/10 职场文书
公司费用报销管理制度
2015/08/04 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
python数据处理之Pandas类型转换
2022/04/28 Python