jQuery中position()方法用法实例


Posted in Javascript onJanuary 16, 2015

本文实例讲述了jQuery中position()方法用法。分享给大家供大家参考。具体分析如下:

此方法获取匹配元素相对某些元素的偏移量。
返回的对象包含两个整型属性(top和left)的对象。
此方法只对可见元素有效。
语法结构:

$(selector).position()

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

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

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>position()函数-三水点靠木</title>

<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>

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

希望本文所述对大家的jQuery程序设计有所帮助。

本文转自:蚂蚁部落http://www.softwhy.com/

Javascript 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
jQuery中offset()方法用法实例
Jan 16 #Javascript
jQuery中clone()方法用法实例
Jan 16 #Javascript
jQuery中empty()方法用法实例
Jan 16 #Javascript
jQuery中replaceAll()方法用法实例
Jan 16 #Javascript
jQuery中wrapInner()方法用法实例
Jan 16 #Javascript
jQuery中wrapAll()方法用法实例
Jan 16 #Javascript
jQuery中unwrap()方法用法实例
Jan 16 #Javascript
You might like
文件上传的实现
2006/10/09 PHP
php session劫持和防范的方法
2013/11/12 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript 实现map集合
2015/04/03 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
python中正则的使用指南
2016/12/04 Python
python处理按钮消息的实例详解
2017/07/11 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python for 循环获取index索引的方法
2019/02/01 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
党日活动总结
2014/05/07 职场文书
个人自荐材料
2014/05/23 职场文书
八项规定整改方案
2014/10/01 职场文书
先进党员事迹材料
2014/12/24 职场文书
结婚保证书
2015/01/16 职场文书
慰问信范文
2015/02/14 职场文书
南京南京观后感
2015/06/02 职场文书
小学班主任教育随笔
2015/08/15 职场文书
教师学习心得体会范文
2016/01/21 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis