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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
js实现无缝轮播图特效
May 09 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
PHP 手机归属地查询 api
2010/02/08 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript window.location对象
2014/11/14 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Windows下安装Django框架的方法简明教程
2018/03/28 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python绘制股票移动均线的实例
2019/08/24 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
学校安全工作制度
2014/01/19 职场文书
农贸市场管理制度
2014/01/31 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书