位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享jQuery position() 函数详解以及jQuery中position函数的应用,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

语法

jQuery 1.2 新增该函数。

返回值

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

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

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

示例&说明

以下面这段HTML代码为例:

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

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

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

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

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

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

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

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

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

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

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

jQuery+json实现的简易Ajax调用实例 本文实例讲述了jQuery+json实现的简易Ajax调用。分享给大家供大家参考,具体如下:Userservlet.java代码:packagecom.iss.servlet;importorg.json.JSONException;importorg.json.

jQuery检测滚动条是否到达底部 一、jQuery检测浏览器window滚动条到达底部jQuery获取位置和尺寸相关函数:$(document).height()获取整个页面的高度$(window).height()获取当前也就是浏览器所能看

JQuery中Ajax()的data参数类型实例分析 本文实例分析了JQuery中Ajax()的data参数类型。分享给大家供大家参考,具体如下:前面简单分析介绍了《ajax中data传参的两种方式》,对于ajax参数传递方

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

本文链接地址:https://www.jiuchutong.com/biancheng/377712.html 转载请保留说明!

上一篇:jQuery滚动加载图片实现原理(jquery滚动条滚动到指定位置)

下一篇:jQuery+json实现的简易Ajax调用实例(jquery 操作json)

  • 预缴增值税的账务
  • 个体户一年能开多少普票
  • 房地产开发企业土地增值税预缴
  • 更换税控盘后原发票如何导入旧盘开票税局
  • 汇算清缴可以调成本吗
  • 计提的成本次月怎么处理
  • 红字专用发票能作废吗
  • 票面3个点什么意思
  • 注销了出口退税怎么办
  • 一般纳税人购入商品取得普通发票
  • 职工取暖费计入什么科目
  • 银行对个人借款的处理
  • 失控发票进项税转出企业无法承担所得税怎么办
  • 国外人员劳务费怎么算
  • 租房发票的税由谁承担
  • 房产税逾期有滞纳金吗
  • 投资收益所得税表怎么填
  • 小规模季度超过30万,普票咋交税
  • 小规模纳税人开专票税率是1%还是3%
  • 申报表作废后怎么显示的是已申报,不能重新申报
  • 享受固定资产一次性扣除政策
  • 增值税专用发票电子版
  • 外贸企业零退税怎么算
  • 进口增值税内销可以抵扣吗
  • 外币出资汇率变动会计处理
  • 银行转账备用金是什么意思
  • 学校收取食堂管理费
  • 车辆保险返点计算器
  • 理财公司收到客户投资款怎么处理
  • 不抵扣的发票是什么发票
  • fontcreator字间距
  • 企业收到的政府补贴,怎么入账
  • 如何断开微软账户与电脑的链接
  • 增值税电子发票有什么用
  • 代开房租的税点计入什么科目?
  • PHP:session_cache_expire()的用法_Session函数
  • 理财产品利息税
  • 其他应收款超过一年是12个月吗?
  • php基于正则批量输出
  • php字符串转换
  • php对接第三方支付教程
  • 企业所得税季初和季末怎么算
  • wordpress怎么添加图片
  • 查询不到shsh怎么回事
  • 建筑施工企业增值税税率调整时间
  • 已经认证抵扣的发票,要退回,怎么处理
  • 佣金支出和手续费一样吗
  • 电子凭证用不了
  • 电子发票已开出客户退款会计处理是怎样的?
  • 风险纳税人去税务局去报税可以吗
  • 长期待摊费用每个月摊销多少
  • 季度末需要结转本年利润吗
  • 工伤七至十级有伤残津贴吗
  • 车辆报废取得的收入增值税怎么算
  • 某项租赁合同,租赁期为8年,每年年末支付租金100万
  • 缴纳工会经费如何记账
  • sqlserver创建链接服务器连接实例
  • linux常用命令sed
  • 电脑程序在运行桌面不显示的解决方法
  • ubuntu server怎么样
  • centos6.10安装教程详解
  • 苹果怎样快速移动应用到其他桌面
  • win1020h2版本要更新多久
  • Win10 Mobile 10586.36在Lumia640 XL中的体验 很流畅
  • linux系统的服务器,重启之后运算速度变慢
  • Android游戏开发打砖块
  • [置顶]游戏名:chivalry2
  • linux的rz sz命令
  • perl读取文件内容到数组
  • Bullet(Cocos2dx)之优化PhysicsDraw3D
  • easyui折叠面板默认折叠
  • javascript常用语句
  • vue复用node_module
  • 三消游戏在线
  • python3 random模块
  • jquery 列表控件
  • 国家税务总局定额发票查验平台官网
  • 国税局事业编制和公务员哪个比较好
  • 税务总局各司领导名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设