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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
jquery replace方法去空格
May 08 jQuery
Webpack按需加载打包chunk命名的方法
Sep 22 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
django ORM之values和annotate使用详解
2020/05/19 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
大四毕业生学习总结的自我评价
2013/10/31 职场文书
酒店营销策划方案
2014/02/07 职场文书
食品卫生管理制度
2015/08/06 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技