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 相关文章推荐
javascript的函数
Jan 31 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
JS的深浅复制详细
Oct 16 Javascript
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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP 字符串 小常识
2009/06/05 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python做简单的字符串匹配详解
2017/03/21 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python与mysql数据库交互的实现
2020/01/06 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
生物科学专业职业规划书范文
2014/02/11 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
经典公益广告词
2014/03/13 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers