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 相关文章推荐
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
原生js实现日期联动
Jan 12 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP 时间日期操作实战
2011/08/26 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
js 格式化时间日期函数小结
2010/03/20 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
使用Django连接Mysql数据库步骤
2019/01/15 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python 魔法函数实例及解析
2019/09/25 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
为什么说python更适合树莓派编程
2020/07/20 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
高级销售员求职信
2013/10/25 职场文书
大客户销售经理职责
2013/12/04 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
环保标语大全
2014/06/12 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
劳模事迹材料范文
2014/12/24 职场文书
职位证明模板
2015/06/23 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android