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+'
'+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+' '+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>