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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
node获取客户端ip功能简单示例
Aug 24 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
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 管理系统程序中的后门
2009/08/05 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
node.js中的Socket.IO使用实例
2014/11/04 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python中input与raw_input 之间的比较
2017/08/20 Python
Selenium的使用详解
2018/10/19 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
一份Java笔试题
2012/02/21 面试题
理工科学生的自我评价
2013/12/15 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
员工考核评语大全
2014/04/26 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
公司承诺函范文
2015/01/21 职场文书
会计工作能力自我评价
2015/03/05 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers