js进阶 11-8 jquery如何获取元素相对于父元素的位置

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

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

 

 

 

 

 

 

 

 

 

 

 
 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9206864.html

你可能感兴趣的:(javascript)