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

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>