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对象和DOM对象的相互转化实现代码
Mar 02 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
js实现页面图片消除效果
Mar 24 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
做网页的一些技巧
2007/02/01 Javascript
动态表格Table类的实现
2009/08/26 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python创建临时文件夹的方法
2015/07/06 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
找工作最新求职信
2013/12/22 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
活动经费申请报告
2015/05/15 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP