jQuery的position()方法详解


Posted in Javascript onJuly 19, 2015

position()方法的定义和用法:

此方法获取匹配元素相对某些元素的偏移量。

返回的对象包含两个整型属性(top和left)的对象。

此方法只对可见元素有效。

语法结构:

$(selector).position()

在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量。很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位。方法的偏移量参考原则如下:

1.如果父辈元素中没有采用定位的(position属性值为relative、absolute或者fixed),那么偏移量参考对象为窗口。

2.如果父辈元素中有采用定位的,那么偏移量的参考对象为距离它最近的采用定位的元素,

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 background-color:green;
 width:200px;
 height:200px;
 padding:50px;
 margin-bottom:50px;
 margin-left:100px;
}
.children{
 height:150px;
 width:150px;
 background-color:red;
 line-height:150px;
 text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".children").each(function(){
  var text;
  text="left:"+$(this).position().left;
  text+="top:"+$(this).position().top;
  $(this).text(text);
 })
})
</script>
</head>
<body>
<div class="father" style="position:relative">
 <div class="children"></div>
</div>
<div class="father">
 <div class="children"></div>
</div>
</body>
</html>

在以上代码中顶部组合,由于父元素采用的是相对定位,那么获取的偏移量就是相对于父元素的。在底部的组合中,由于父元素没有采用定位,那么偏移量参考对象就是窗口。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JavaScript手写数组的常用函数总结
Nov 22 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
ExtJs动态生成treepanel的Json格式
Jul 19 #Javascript
javascript中mouseover、mouseout使用详解
Jul 19 #Javascript
javascript实现的简单计时器
Jul 19 #Javascript
javascript中setInterval的用法
Jul 19 #Javascript
js中跨域方法原理详解
Jul 19 #Javascript
javascript获取网页宽高方法汇总
Jul 19 #Javascript
jQuery获取URL请求参数的方法
Jul 18 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python正则中最短匹配实现代码
2018/01/16 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python搜索包的路径的实现方法
2019/07/19 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
临床医师专业个人自我评价
2014/01/08 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
教师考核评语大全
2014/12/31 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
golang内置函数len的小技巧
2021/07/25 Golang