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. 13.Zookeeper的java客户端API使用方法

    转自:https://blog.csdn.net/jiuqiyuliang/article/details/56012027

  2. 学习笔记：Vue——自定义指令

    在Vue2.0中,代码复用和抽象的主要形式是组件.然鹅,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令. 1.举个聚焦输入框的例子,全局注册focus指令 Vue.dir ...

  3. 如何不使用js实现鼠标hover弹出菜单效果

    最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

  4. Python 极简教程（六）运算符

    运算符,我们日常生活中使用的加减乘除,都是运算符的一种.当然这种一般我们称为算术运算符,用于处理数字运算的. 但是在计算机语言中,还有很多的运算符.用于处理不用的情况. 主要有以下几类: 算术运算符 ...

  5. net基础题

    1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private :   私有成员, 在类的内部才可以访问. protected : 保 ...

  6. 百度糯米iOSclient登录BUG

    环境 设备:iphone5s 网络:WIFI App版本号: 操作步骤 1.进入登录界面 2.输入手机号 3.点击[获取验证码],等待接收验证码后 4.点击[X]退出登录界面 5.反复1-2-3,提示 ...

  7. struts2笔记---struts2的执行过程

    1.服务器启动: 加载项目web.xml 创建struts核心过滤器对象,执行filter-->init() struts-default.xml     核心功能的初始化 struts-plu ...

  8. PHP Web木马扫描器代码

    <?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 ...

  9. 【例题 6-10 UVA - 699】The Falling Leaves

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 递归模拟就好. [代码] #include <bits/stdc++.h> using namespace std; c ...

  10. IIS7配置PHP图解

    IIS6整合PHP详解:http://zhidao.zgsj.com/article/8/2011118142648.shtml PHP5.2.17 官方下载: http://windows.php. ...