js進階 11-7 jquery如何獲取和改變元素的位置
一、總結
一句話總結：jquery中匿名函數中的index參數是什么意思。jquery對象多集合，故index為所選元素的下標。
1、jquery中元素的位置有哪三種？
相對文檔，offset()，相對父元素，position()，相對垂直滾動條頂部，scrollTop()
offset() 方法返回或設置匹配元素相對於文檔的偏移（位置）。
position() 方法返回匹配元素相對於父元素的位置（偏移）。
scrollTop():獲取或設置元素相對於垂直滾動條頂部的距離， scrollLeft():來獲取或設置元素相對於水平滾動條左部的距離。
2、jquery中匿名函數中的index參數是什么意思？
jquery對象多集合，故index為所選元素的下標
42 $('div').offset(function(index,old){ 43 alert(index) 44 return{ 45 top:old.top+100*index, 46 left:old.left+100*index 47 } 48 })
3、offset()帶匿名函數的時候，匿名函數的兩個參數分別是什么，代表什么意思？
使用函數來設置所有匹配元素的偏移坐標:$(selector).offset(function(index,oldoffset))
- index - 可選。接受選擇器的 index 位置
- oldvalue - 可選。接受選擇器的當前坐標
42 $('div').offset(function(index,old){ 43 alert(index) 44 return{ 45 top:old.top+100*index, 46 left:old.left+100*index 47 } 48 })
4、offset()的兩個屬性是什么（知道offset()的意思，兩個屬性還不好想么）？
距左和距上啊
top 和 left，以像素計
27 $('#btn1').click(function(){ 28 //alert(typeof $('#div1').offset()) 29 //獲取div1距離頂部的距離 30 var top=$('#div1').offset().top 31 var left=$('#div1').offset().left 32 alert(top+'\n'+left) 33 })
二、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 div{ 11 width: 100px;height: 100px; 12 background: red; 13 border: solid 3px green; 14 } 15 </style> 16 </style> 17 </head> 18 <body> 19 <div id="div1"></div> 20 <div id="div2"></div> 21 <div id="div3"></div> 22 <input id="btn1" type="button" value="獲取"> 23 <input id="btn2" type="button" value="設置"> 24 <input id="btn3" type="button" value="設置2"> 25 <script type="text/javascript"> 26 $(function(){ 27 $('#btn1').click(function(){ 28 //alert(typeof $('#div1').offset()) 29 //獲取div1距離頂部的距離 30 var top=$('#div1').offset().top 31 var left=$('#div1').offset().left 32 alert(top+'\n'+left) 33 }) 34 $('#btn2').click(function(){ 35 // $('#div2').offset({ 36 // top:100, 37 // left:100 38 // }) 39 $('#div2').offset($('#btn3').offset()) 40 }) 41 $('#btn3').click(function(){ 42 $('div').offset(function(index,old){ 43 alert(index) 44 return{ 45 top:old.top+100*index, 46 left:old.left+100*index 47 } 48 }) 49 }) 50 51 }) 52 </script> 53 </body> 54 </html>