jQuery position() 函数详解以及jQuery中position函数的应用

编辑：rootadmin

推荐整理分享jQuery position() 函数详解以及jQuery中position函数的应用，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。

所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。

该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。

与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。此外，position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。

该函数属于jQuery对象(实例)。

语法

jQuery 1.2 新增该函数。

返回值

position()函数的返回值为Object类型，返回一个相对于离它最近的"被定位的"祖辈元素的偏移坐标对象，该对象具有left和top属性。

如果当前jQuery对象匹配多个元素，返回坐标时，position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回undefined。

position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0)，向右为正，向下为正。

示例&说明

以下面这段HTML代码为例：

jQuery position() 函数详解以及jQuery中position函数的应用

以下jQuery示例代码用于演示position()函数和offset()函数的用法：

从上述jQuery的运行结果可知，position()并不是获取相对于其父元素的偏移位置。如果n2的祖辈元素全部为默认定位，则position()返回的偏移位置和offset()函数一致。

下面，我们将上述HTML代码中的n1加上相对定位(relative)：

然后，我们重新执行上述jQuery代码，可以看到以下结果：

此时，在n2的祖辈元素中，n1是离n2最近的定位的祖辈元素(这里是relative，absolute、fixed也是如此)，因此position()返回n2相对于n1的偏移位置。

.jQuery中position函数的应用(居中，超出屏幕处理等)

jQuery提供了一个Position函数，可以很方便的对Html元素进行定位，简单的使用方法如下:

上面是一个很常用的用法，注册一个click时间，然后当有点击事件发生时，获取到被点击的元素，然后将对话框用position方法显示至界面中。

position函数接受一个options对象，参数有很多

of：表示要放置在那个对象上，也可以传递click的event对象

my与at：这两个比较不容易理解，其实也就是参照物和被参照物，my参数表示用什么位置来做参照而at表示参照目标的那个位置。值范围为”left center right top bottom”的任意一个或两个。举个例子：my:”top left”,at:”left buttom”，这样配置表示将要被定为的元素的左上角放置在目标元素的左下角。

collision：表示如何处理碰撞，值范围为:”flip fit none”三选一。flip的官方英文说明看不是很懂，实际测试的效果是，如果超出了预期范围（如window）则会尝试将元素放置到目标区域的相反位置。fit是适应，也就是会将元素完整的放置在预期范围内，而不会让元素溢出。而none则是不做任何碰撞处理。

offset表示依靠my、at、of对齐元素后再进行多少距离的偏移，例如设置为” ″表示移至目标位置后再向下和右偏移px

常见的使用就是弹出对话框的位置，为了让对话框在鼠标点击的位置显示，则可以将click传的event对象传递给of参数，并且为了保证对话框在窗口范围内，可以将collision设置为fit。最后再根据实际需求来设置对齐参数my和at，并且用offset进行偏移微调。一个将弹出对话框设置在窗口中央的例子：

以上内容是小编给大家分享的jQuery position() 函数详解以及jQuery中position函数的应用的全部叙述，希望大家喜欢。

jQuery+json实现的简易Ajax调用实例本文实例讲述了jQuery+json实现的简易Ajax调用。分享给大家供大家参考，具体如下：Userservlet.java代码：packagecom.iss.servlet;importorg.json.JSONException;importorg.json.

jQuery检测滚动条是否到达底部一、jQuery检测浏览器window滚动条到达底部jQuery获取位置和尺寸相关函数：$(document).height()获取整个页面的高度$(window).height()获取当前也就是浏览器所能看

JQuery中Ajax()的data参数类型实例分析本文实例分析了JQuery中Ajax()的data参数类型。分享给大家供大家参考，具体如下：前面简单分析介绍了《ajax中data传参的两种方式》，对于ajax参数传递方

标签: jQuery position() 函数详解以及jQuery中position函数的应用

本文链接地址:https://www.jiuchutong.com/biancheng/377712.html 转载请保留说明！

上一篇：jQuery滚动加载图片实现原理(jquery滚动条滚动到指定位置)

下一篇：jQuery+json实现的简易Ajax调用实例(jquery 操作json)