Jquery中offset()和position()的区别分析
本文实例分析了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程序设计有所帮助。
-
本文向大家介绍jquery中attr和prop的区别分析，包括了jquery中attr和prop的区别分析的使用技巧和注意事项，需要的朋友参考一下 在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。 关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单： • 对于HTML元素本身就带有的固有属性，在处理时，
-
本文向大家介绍jQuery中closest和parents的区别分析，包括了jQuery中closest和parents的区别分析的使用技巧和注意事项，需要的朋友参考一下 jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了，但如果说仔细可能各位不懂，下面我们一起来看看closest和parents区别。 1.父级 parent()——唯一父级元素，可能是0个或1
-
本文向大家介绍jQuery中.attr()和.data()的区别分析，包括了jQuery中.attr()和.data()的区别分析的使用技巧和注意事项，需要的朋友参考一下 $.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别。 Jquery对象属性和DOM属性 一个简单的例子 • $.attr()每次都从DOM 元素 中取属性的值，即和视图中标签内的属性值保持
-
本文向大家介绍Jquery对象和Dom对象的区别分析，包括了Jquery对象和Dom对象的区别分析的使用技巧和注意事项，需要的朋友参考一下 在讨论之前，先约定好定义变量的风格。 如果获取的对象是jQuery对象，那么在变量前加上$，例如： 如果获取的是DOM对象，则定义如下： jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方
-
本文向大家介绍浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别，包括了浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别的使用技巧和注意事项，需要的朋友参考一下 hide和fadeOut 显示效果有什么区别？ show和fadeIn显示效果都一样？ 很多朋友在学习jQuery的时候 会遇到这个问题 ，hide和 fadeOut都可以带有参数
-
本文向大家介绍jquery中live()方法和bind()方法区别分析，包括了jquery中live()方法和bind()方法区别分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery中live()方法和bind()方法区别。分享给大家供大家参考，具体如下： live()不受加载时间顺序的影响，只要查找能够配对上就能够绑定对应的事件，而bind方法只有在第一次被加载的时候才绑定时