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


Posted in Javascript onDecember 14, 2015

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函数的应用的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
js与applet相互调用的方法
Jun 22 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
Position属性之relative用法
Dec 14 #Javascript
CSS中position属性之fixed实现div居中
Dec 14 #Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 #Javascript
js实现拖拽效果(构造函数)
Dec 14 #Javascript
jQuery滚动加载图片实现原理
Dec 14 #Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 #Javascript
jquery实现倒计时效果
Dec 14 #Javascript
You might like
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
知识竞赛主持词
2014/03/26 职场文书
超市创业计划书
2014/04/24 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
公司员工管理制度
2015/08/04 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python