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

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

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

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

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

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

语法

jQuery 1.2 新增该函数。

jQueryObject.position( )

返回值

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

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

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

示例&说明

以下面这段HTML代码为例：

<br>
<br>
<p id="n1"><span id="n2">专注于编程开发技术分享</span></p>

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

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

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

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

<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">专注于编程开发技术分享</span></p>

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

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

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

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

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

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

上面是一个很常用的用法，注册一个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对齐元素后再进行多少距离的偏移，例如设置为”100 100″表示移至目标位置后再向下和右偏移100px

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

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});

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

赞 (0)

相关推荐

  • Jquery中的offset()和position()深入剖析

    先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 复制代码 代码如下: // Get *real*

  • Jquery中offset()和position()的区别分析

    本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

  • jQuery中position()方法用法实例

    本文实例讲述了jQuery中position()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.

  • jQuery.position()方法获取不到值的安全替换方法

    调用jQuery.position()方法会返回相对于父元素的位置,jQuery官方文档中描述说,它跟.offset()方法不一样,.offset()返回的是相对于document的位置,而.position()返回的是相对于父元素的位置. 但事实上,在使用的过程中,我们发现.position()返回的值经常是0.但事实不是0.尤其是谷歌浏览器和IE浏览器里.火狐浏览器没有此问题. 究其原因,以基于Webkit的浏览器(谷歌浏览器和Safari浏览器)为例,只有当元素(图片.flash等)完全加

  • jQuery的position()方法详解

    position()方法的定义和用法: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.方法的偏移量参考原则如下: 1.如果父辈元素中没有采用定位的(position

  • jQuery Position方法使用和兼容性

    1.position方法 jquery api地址:http://jquery.cuishifeng.cn/position.html position方法获取匹配元素相对父元素的偏移. 2.说明 2.1 与offset()区别 .offset()是获得该元素相对于documet的当前坐标 .position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素. 2.2 值计算 .元素本身所占用的边框,边距和填充的大小不计. .父元素的边框和边距不计,父元素的填

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

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse

  • 详解WordPress开发中wp_title()函数的用法

    wp_title 函数在 WordPress 中是用来显示文章.页面.分类等等等等标题的一个函数,但在首页索引,该函数将不显示任何的东西.该函数在 WordPress 官方主题中一直被使用,但目前很多定制的主题中这个函数总是为忽视. 函数意义详解 wp_title 函数用来显示页面的标题,如在文章页面,则显示文章标题:在分类页面,则显示分类名称,但在首页索引,该函数将不显示任何的东西. 有点像 WordPress 中的 get_the_title 和 single_cat_title()这两个函

  • 详解C++编程中对于函数的基本使用

    详解C++编程中对于函数的基本使用

    形式参数和实际参数 在调用函数时,大多数情况下,函数是带参数的.主调函数和被调用函数之间有数据传递关系.前面已提到:在定义函数时函数名后面括号中的变量名称为形式参数(formal parameter,简称形参),在主调函数中调用一个函数时,函数名后面括号中的参数(可以是一个表达式)称为实际参数(actual parameter,简称实参). [例]调用函数时的数据传递. #include <iostream> using namespace std; int max(int x,int y)

  • 详解C语言中的函数、数组与指针

    1.函数:当程序很小的时候,我们可以使用一个main函数就能搞定,但当程序变大的时候,就超出了人的大脑承受范围,逻辑不清了,这时候就需要把一个大程序分成许多小的模块来组织,于是就出现了函数概念:   函数是C语言代码的基本组成部分,它是一个小的模块,整个程序由很多个功能独立的模块(函数)组成.这就是程序设计的基本分化方法: (1) 写一个函数的关键: 函数定义:函数的定义是这个函数的实现,函数定义中包含了函数体,函数体中的代码段决定了这个函数的功能: 函数声明:函数声明也称函数原型声明,函数的原

  • 详解SqlServer数据库中Substring函数的用法

    功能:返回字符.二进制.文本或图像表达式的一部分 语法:SUBSTRING ( expression, start, length ) 1.substring(操作的字符串,开始截取的位置,返回的字符个数) 例如: 从'abbccc'中返回'ccc',charindex函数用法(charindex(查找的字符串,被查找的字符串,开始查找的位置),例如查找'abbccc'中第一个'c'出现的位置,charindex('c','abbccc',1)) declare @str1 varchar(25

  • 详解C++编程中向函数传递引用参数的用法

    引用类型的函数参数 向函数传递引用而非大型对象的效率通常更高. 这使编译器能够在保持已用于访问对象的语法的同时传递对象的地址. 请考虑以下使用了 Date 结构的示例: // reference_type_function_arguments.cpp struct Date { short DayOfWeek; short Month; short Day; short Year; }; // Create a Julian date of the form DDDYYYY // from a

  • 详解WordPress开发中get_current_screen()函数的使用

    详解WordPress开发中get_current_screen()函数的使用

    get_current_screen() 函数是一个我们很少用到,但却超级实用的一个函数,如果你正着手于制作一个主题,却不知道文档应该放在哪里的话,那你应该看一下这个从 WordPress 3.0 才开始有的函数,该函数允许我们获得一个 WP_Screen 对象,并使用该对象的成员方法在后台里面加挂我们自定义的一个帮助菜单(该功能在,3.3版后得到完善). 如果你不喜欢将 WordPress 研究的太透彻的话,那你现在就可以拿着酱油瓶,向前打酱油去了. 引言 首先,get_current_scr

  • SQL Server COALESCE函数详解及实例

    SQL Server COALESCE函数详解及实例

    SQL Server COALESCE函数详解 很多人知道ISNULL函数,但是很少人知道Coalesce函数,人们会无意中使用到Coalesce函数,并且发现它比ISNULL更加强大,其实到目前为止,这个函数的确非常有用,本文主要讲解其中的一些基本使用:  首先看看联机丛书的简要定义: 返回其参数中第一个非空表达式语法: COALESCE ( expression [ ,...n ] ) 如果所有参数均为 NULL,则 COALESCE 返回 NULL.至少应有一个 Null 值为 NULL

  • OraclePL/SQL单行函数和组函数详解

    正在看的ORACLE教程是:OraclePL/SQL单行函数和组函数详解. 1 函数是一种有零个或多个参数并且有一个返回值的程序.在SQL中Oracle内建了一系列函数,这些函数都可被称为SQL或PL/SQL语句,函数主要分为两大类:  2  3 单行函数  4  5 组函数   6  7 本文将讨论如何利用单行函数以及使用规则.  8  9 SQL中的单行函数 10 11 SQL和PL/SQL中自带很多类型的函数,有字符.数字.日期.转换.和混合型等多种函数用于处理单行数据,因此这些都可被统称

  • jQuery数组处理详解(含实例演示)

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代

随机推荐