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. mysql 多实例案例实战

    其实Mysql多实例就是在一个 mysql 服务上面启动三个实例,相当于三个分离开来的数据库,至于为什么要做这个,你也可以选择分别安装三个MySQL,只是过于麻烦,多实例中只需要一个配置档my.cnf ...

  2. php的数据类型和变量的作用域

    1)php支持例如以下所看到的的基本数据类型: Integer(整数).Float(浮点数).String(字符串).Boolean(布尔值).Array(数组).Object(对象),此外还有两个特 ...

  3. 浅析C#组件编程中的一些小细节

    控件与组件的区别(Control&Component的区别) 作者:作者不详  发布日期:2011-06-30 12:08:41 控件与组件的区别(Control&Component的 ...

  4. VC中画矩形框 & polyline画多点

    搞自动化会经常遇到一个问题就是记录实时的曲线,通常做法是首先将数据保存在一个记事本中,或数据库.使用VB或DELPHI可以直接调用现成的控件画图,只是控制起来不方便.所以使用VC就需要程序来控制.在网 ...

  5. 【例题 6-12 UVA - 572 】Oil Deposits

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] dfs.. [代码] #include <bits/stdc++.h> using namespace std; con ...

  6. js进阶 12-13 jquery中one方法和trigger方法如何使用

    js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...

  7. js循环函数中的匿名函数和闭包问题（匿名函数要用循环中变量的问题）

    js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题) 一.总结 需要好好看下面代码 本质是因为匿名函数用到了循环中的变量,而普通方式访问的话,匿名函数的访问在循环之后,所以得到的i是循环 ...

  8. 【z09】关押罪犯

    描述 S城现有两座监狱,一共关押着N名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用"怨气值"(一个正整 ...

  9. AE 向已存在的要素类中添加字段

    风过无痕 原文向已存在的要素类中添加字段 以前,在用AE写程序的时候,为了方便,一般都是直接新建一个MapControl窗体应用程序.这次需要解决的问题用不到窗口,就突发奇想,直接新建了一个Conso ...

  10. iOS ASIHTTPRequest

    ASIHTTPRequest对CFNetwork API进行了封装,并且使用起来非常简单,用Objective-C编写,可以很好的应用在Mac OS X系统和iOS平台的应用程序中.ASIHTTPRe ...