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、相关知识
- offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
- 该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
- 设置偏移坐标:$(selector).offset(value)
- 使用函数来设置所有匹配元素的偏移坐标:$(selector).offset(function(index,oldoffset))
- index - 可选。接受选择器的 index 位置
- oldvalue - 可选。接受选择器的当前坐标
- position() 方法返回匹配元素相对于父元素的位置（偏移）。
在CSS定位布局中，如果我们对父元素设置position:relative，我们就可以使用position:absolute来设置子元素相对于父元素的定位距离
- position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。
- 该函数返回一个坐标对象，该对象有一个left属性和top属性。position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0)，向右为正，向下为正。
- 如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。
- 如果当前jQuery对象匹配多个元素，返回坐标时，position()函数只以其中第一个匹配的元素为准。如果没有匹配的元素，则返回undefined。
- 与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。
- position()函数无法用于设置操作。
- scrollTop():获取或设置元素相对于垂直滚动条顶部的距离，
- scrollLeft():来获取或设置元素相对于水平滚动条左部的距离。
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 #main{ 11 margin:50px; 12 padding: 50px; 13 background: #ccc; 14 width: 100px;height: 100px; 15 position: relative; 16 /* overflow: auto;*/ 17 } 18 #div1{ 19 position: absolute; 20 width: 100px;height: 100px; 21 background: red; 22 } 23 </style> 24 </style> 25 </head> 26 <body> 27 <div id="main"> 28 <div id="div1"></div> 29 <ol> 30 <li></li> 31 <li></li> 32 <li></li> 33 <li></li> 34 <li></li> 35 <li></li> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 <li></li> 41 <li></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 <li></li> 48 <li></li> 49 <li></li> 50 <li></li> 51 <li></li> 52 <li></li> 53 <li></li> 54 <li></li> 55 <li></li> 56 <li></li> 57 <li></li> 58 <li></li> 59 <li></li> 60 <li></li> 61 <li></li> 62 <li></li> 63 <li></li> 64 <li></li> 65 <li></li> 66 <li></li> 67 <li></li> 68 <li></li> 69 <li></li> 70 <li></li> 71 <li></li> 72 <li></li> 73 <li></li> 74 <li></li> 75 <li></li> 76 <li></li> 77 <li></li> 78 <li></li> 79 <li></li> 80 </ol> 81 </div> 82 <input id="btn1" type="button" value="获取"> 83 <input id="btn2" type="button" value="设置"> 84 <input id="btn3" type="button" value="设置2"> 85 <script type="text/javascript"> 86 $(function(){ 87 $('#btn1').click(function(){ 88 var top = $("#div1").offset().top; 89 var left = $("#div1").offset().left; 90 alert(top+' '+left) 91 92 var top2 = $("#div1").position().top; 93 var left2= $("#div1").position().left; 94 alert(top2+' '+left2) 95 }) 96 97 $('#btn2').click(function(){ 98 // $("#div1").offset({ 99 // top:200, 100 // left:200 101 // }); 102 $("#div1").position({ 103 top:200, 104 left:200 105 }); 106 107 }) 108 109 var count=0 110 $('#btn3').click(function(){ 111 $('#main').scrollTop(count++*100) 112 alert($('#main').scrollTop()) 113 }) 114 $(window).scrollTop(500) 115 }) 116 </script> 117 </body> 118 </html>