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+'\n'+left) 91 92 var top2 = $("#div1").position().top; 93 var left2= $("#div1").position().left; 94 alert(top2+'\n'+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>