jQuery Position方法使用和兼容性

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方法使用和兼容性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Jquery中的offset()和position()深入剖析

    先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父元素的偏移. 返回的对象包含两个整形属性:top 和 left.为精确计算结果,请在补白.边框和填充属性上使用像素单位.此方法只对可见元素有效. 真的就这么简单吗?实践出真知. 先来看看在jquery框架源码里面,是怎么获得position()的: 复制代码 代码如下: // Get *real*

  • jQuery中position()方法用法实例

    本文实例讲述了jQuery中position()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.

  • jQuery的position()方法详解

    position()方法的定义和用法: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.方法的偏移量参考原则如下: 1.如果父辈元素中没有采用定位的(position

  • jQuery.position()方法获取不到值的安全替换方法

    调用jQuery.position()方法会返回相对于父元素的位置,jQuery官方文档中描述说,它跟.offset()方法不一样,.offset()返回的是相对于document的位置,而.position()返回的是相对于父元素的位置. 但事实上,在使用的过程中,我们发现.position()返回的值经常是0.但事实不是0.尤其是谷歌浏览器和IE浏览器里.火狐浏览器没有此问题. 究其原因,以基于Webkit的浏览器(谷歌浏览器和Safari浏览器)为例,只有当元素(图片.flash等)完全加

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse

  • Jquery中offset()和position()的区别分析

    本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

  • jQuery Position方法使用和兼容性

    1.position方法 jquery api地址:http://jquery.cuishifeng.cn/position.html position方法获取匹配元素相对父元素的偏移. 2.说明 2.1 与offset()区别 .offset()是获得该元素相对于documet的当前坐标 .position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素. 2.2 值计算 .元素本身所占用的边框,边距和填充的大小不计. .父元素的边框和边距不计,父元素的填

  • jQuery 滑动方法slideDown向下滑动元素

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换. jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素. 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果

  • Jquery attr()方法 属性赋值和属性获取详解

    jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1.  attr( 属性名 )        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2.  attr( 属性名, 属性值 )    //设置属性的值 (为所有匹配的元素设置一个属性值.) 3.  att

  • jQuery ajax方法传递中文时出现中文乱码的解决方法

    本文实例讲述了jQuery ajax方法传递中文时出现中文乱码的解决方法.分享给大家供大家参考,具体如下: 使用jQuery的ajax方法,在传递中文时出现中文乱码,按照以前的方法,修改了jquery文件中的ajaxSetting也不好使 复制代码 代码如下: sajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded;charse

  • jQuery on()方法示例及jquery on()方法的优点

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

  • Jquery 扩展方法

    网上搜索了信息在编写JQUERY扩展方法有两种,一种是使用jquery.fn.extend,一种是jquery.extend. jquery.fn表示jquery.prototype,,给jquery对象添加方法.刚好用到扩展方法,并且使用jquery.fn,这里就写下jquery.fn的用法,这些网上很多,蛮写蛮写 比如当点击 button时弹出一个textbox的值加一个参数值 复制代码 代码如下: jquery.fn.extend({ alertMessage:function(messa

随机推荐