js进阶 11-8  jquery如何获取元素相对于父元素的位置

一、总结

一句话总结：用jquery的position方法，但是使用这个方法的前提是父元素相对定位，子元素绝对定位，否则和offset()一样。

1、jquery中jquery集合中的匿名函数的两个参数是什么？

$(selector).offset(function(index,oldoffset))，很多jquery集合中的匿名函数都是index和oldvalue两个参数

2、jquery中position()和offset()的区别是什么？

如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。

与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。

3、position()可以像jquery中的其它位置函数（offset()，scrollTop()，scrollLeft()）一样不仅可以取值，也可以设置值么？

不可以

position()函数无法用于设置操作。只可以返回值。

4、如何设置子元素相对于父元素偏移？

在CSS定位布局中，如果我们对父元素设置position:relative，我们就可以使用position:absolute来设置子元素相对于父元素的定位距离

5、jquery中的window对象怎么表示？

$(window)

114             $(window).scrollTop(500)

二、jquery如何获取元素相对于父元素的位置

1、相关知识

  1. offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
    1. 该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
    2. 设置偏移坐标:$(selector).offset(value)
    3. 使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))
      • index - 可选。接受选择器的 index 位置
      • oldvalue - 可选。接受选择器的当前坐标
  2. position() 方法返回匹配元素相对于父元素的位置（偏移）。

    在CSS定位布局中，如果我们对父元素设置position:relative，我们就可以使用position:absolute来设置子元素相对于父元素的定位距离

    • position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
    • 该函数返回一个坐标对象，该对象有一个left属性和top属性。position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0)，向右为正，向下为正。
    • 如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。
    • 如果当前jQuery对象匹配多个元素，返回坐标时，position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回undefined。
    • 与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。
    • position()函数无法用于设置操作。
  3. scrollTop():获取或设置元素相对于垂直滚动条顶部的距离，
  4. scrollLeft():来获取或设置元素相对于水平滚动条左部的距离。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         #main{

             margin:50px;

             padding: 50px;

             background: #ccc;

             width: 100px;height: 100px;

             position: relative;

         /*    overflow: auto;*/

         }

         #div1{

             position: absolute;

             width: 100px;height: 100px;

             background: red;

         }

     </style>

 </style>

 </head>

 <body>

     <div id="main">

         <div id="div1"></div>

         <ol>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ol>

     </div>

     <input id="btn1" type="button" value="获取">

     <input id="btn2" type="button" value="设置">

     <input id="btn3" type="button" value="设置2">

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 var top = $("#div1").offset().top;

                 var left = $("#div1").offset().left;

                 alert(top+'\n'+left)

                 var top2 = $("#div1").position().top;

                 var left2= $("#div1").position().left;

                  alert(top2+'\n'+left2)

             })

             $('#btn2').click(function(){

                 // $("#div1").offset({

     //                 top:200,

     //                 left:200

     //             });

                 $("#div1").position({

                     top:200,

                     left:200

                 });  

             })

             var count=0

             $('#btn3').click(function(){

                 $('#main').scrollTop(count++*100)

                 alert($('#main').scrollTop())

             })

             $(window).scrollTop()

         })

     </script>

 </body>

 </html>
 
 

js进阶 11-8 jquery如何获取元素相对于父元素的位置的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  8. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  9. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

随机推荐

  1. CentOS 7 网络配置、远程访问

    网络配置(配置固定IP访问) 相关命令 ip add 查看网卡状态 ifup eth0 打开端口eth0 ifdown eth0 关闭端口eth0 dhclient 自动获取IP mii-tool e ...

  2. Apple Watch 集成环信SDK

    本文简单的讲述下怎样用Apple Watch Kit集成环信SDK. 升级xcode到version 6.2,和 IOS SDK8.2 下载环信SDK从官网 打开XCode->new proje ...

  3. secureCRT The remote system refused the connection问题解决

    问题: Ubuntu系统必须开启ssh服务后,XP或者其它的主机才干够远程登陆到Ubuntu系统. 1,安装软件包,运行sudo apt-get install openssh-server Ubun ...

  4. nagios 安装配置（包含nrpe端）全 （一）

    一.nagios安装: 1.安装下面命令: 这是本人监控服务时自己定义插件所用到的几个系统命令.可不安装. (1)iostat:监控磁盘IO信息: apt-getinstall sysstat (2) ...

  5. 18. springboot整合jsp

    转自:https://blog.csdn.net/u012562943/article/details/51836729

  6. Docker---(6)问题：bash: vi: command not found

    原文:Docker---(6)问题:bash: vi: command not found 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://bl ...

  7. 一个IP建多个Web站点

      TCP端口法 由于各种原因,我们有时候需要在一个IP地址上建立多个web站点,在IIS5中,我们可能通过简单的设 置达到这个目标. 在IIS中,每个 Web 站点都具有唯一的.由三个部分组成的标识 ...

  8. Java判断1个字符串中出现了几次其他字符串

    public class Test { public static int count(String text,String sub){ , start =; ){ start += sub.leng ...

  9. Android 获取联系人手机号码、姓名、地址、公司、邮箱、生日

    public void testGetAllContact() throws Throwable { //获取联系人信息的Uri Uri uri = ContactsContract.Contacts ...

  10. 宏的使用 extern

    声明全局变量使用的技术. 有些时候C语言的一些条条框框就像语法.学会C语言就是学会了语法. 但是语法怎样使用就又是另一回事了. 我希望自己能多学习一些技巧,而不是一些固定的C语言语法. 这篇文章真的很 ...