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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
Underscore源码分析
Dec 30 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
vue.js的提示组件
Mar 02 Javascript
深入理解node.js之path模块
May 03 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
js微信分享实现代码
2020/10/11 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
python类装饰器用法实例
2015/06/04 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python将音频进行变速的操作方法
2020/04/08 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
动物学专业毕业生求职信
2013/10/11 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
人民币使用说明书
2019/04/17 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
使用Python获取字典键对应值的方法
2022/04/26 Python