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学习笔记-详解in运算符
Sep 13 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
js实现转动骰子模型
Oct 24 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
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python字符串替换的2种方法
2014/11/30 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python实现自主查询实时天气
2018/06/22 Python
浅谈python写入大量文件的问题
2018/11/09 Python
pytest中文文档之编写断言
2019/09/12 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
python中adb有什么功能
2020/06/07 Python
标准导师推荐信(医学类)
2013/10/28 职场文书
座谈会主持词
2014/03/20 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
平安家庭事迹材料
2014/12/20 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP