jQuery Position方法使用和兼容性


Posted in jQuery onAugust 23, 2017

1、position方法

jquery api地址:http://jquery.cuishifeng.cn/position.html

position方法获取匹配元素相对父元素的偏移。

2、说明

2.1 与offset()区别

.offset()是获得该元素相对于documet的当前坐标

.position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素。

2.2 值计算

.元素本身所占用的边框,边距和填充的大小不计。

.父元素的边框和边距不计,父元素的填充计算在内。

3、示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery position()示例</title>
    <style>
      html {
        line-height: 1.15;
      }
      /*父元素--相对定位*/
      .parent {
        position: relative;
        width: 200px;
        height: 400px;
        /*父元素的margin不计算在内*/
        margin-top: 10px;
        /*父元素的border不计算在内*/
        border: 1px solid green;
        /*父元素的padding计算在内*/
        padding-top: 10px;
      }
      .child-1 {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #2E8DED;
      }
      .child-2 {
        width: 100px;
        height: 100px;
        /*子元素的margin不计算在内*/
        margin: 10px auto 0;
        /*子元素的border不计算在内*/
        border: 1px solid #2E8DED;
        /*子元素的padding不计算在内*/
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <p class="child-1">
        first child
      </p>
      <p class="child-2" id="no-2">
        second child
      </p>
    </div>
    <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //获取child-2子元素距离父元素的距离
        console.log($('#no-2').position().top);
      });
    </script>
  </body>
</html>

4、注意

对于文字的line-height等属性,浏览器(chrome、IE、Firefox)默认大小不一致,因此不同的浏览器position()在计算尺寸时会存在不一致,因此必须保证所有浏览器一致的line-height等属性。

示例代码为没有设置line-height的例子,position()在不同的浏览器上计算出的值不一样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery position()示例</title>
    <style>
      html {
        /*必须给予一致的设置,否则position()计算值不同*/
        /*line-height: 1.15;*/
      }
      /*父元素--相对定位*/
      .parent {
        position: relative;
        width: 200px;
        height: 400px;
        /*父元素的margin不计算在内*/
        margin-top: 10px;
        /*父元素的border不计算在内*/
        border: 1px solid green;
        /*父元素的padding计算在内*/
        padding-top: 10px;
      }
      .child-1 {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid #2E8DED;
      }
      .child-2 {
        width: 100px;
        height: 100px;
        /*子元素的margin不计算在内*/
        margin: 10px auto 0;
        /*子元素的border不计算在内*/
        border: 1px solid #2E8DED;
        /*子元素的padding不计算在内*/
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      文字文字
      <p class="child-1">
        first child
      </p>
      <p class="child-2" id="no-2">
        second child
      </p>
    </div>
    <script src=".output/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        //获取child-2子元素距离父元素的距离
        console.log($('#no-2').position().top);
      });
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的jQuery Position方法使用和兼容性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 #jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
jQuery实现广告条滚动效果
Aug 22 #jQuery
You might like
php的控制语句
2006/10/09 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
枚举与#define宏的区别
2014/04/30 面试题
大学运动会入场词
2014/02/22 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
南京导游词
2015/02/03 职场文书
工程合作意向书范本
2015/05/09 职场文书
紫日观后感
2015/06/05 职场文书
2015年国庆节寄语
2015/08/17 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书