微信扫一扫打赏支持

js进阶 11-7 jquery如何获取和改变元素的位置

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、相关知识

元素的位置

  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():获取或设置元素相对于垂直滚动条顶部的距离， 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>

 

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-20 09:42  范仁义  阅读(4802)  评论(0)  编辑  收藏  举报