jQuery使用中的一些注意事项（一）

迈不过友情╰ 2022-07-15 15:10 181阅读 0赞

首先，相对于盒模型来说，大家应该都很熟悉，jQuery中也有一些计算偏移量的，比如.position()和.offset()。  
先看一下官网对这两个的定义：  
**.position()**：获取匹配元素相对父元素的偏移。  
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。  
**.offset()**：获取匹配元素在当前视口的相对偏移。  
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

但是在实际应用中并不是这样的，下面给段代码，可以拷在本地，运行查看，接下来将以这段代码为例进行分析。  
代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>.position()与.offset()</title>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
    <style type="text/css"> * { margin: 0; padding: 0; } .nob1 { margin: 100px 0 0 100px; padding: 100px 0 0 100px; width: 200px; height: 200px; background: #ccc; border: 1px solid #000; } .nob2 { width: 100px; height: 100px; background: #f00; border: 1px solid #00f; } .nob3 { margin: 10px 0 0 10px; width: 50px; height: 50px; background: #0f0; border: 1px solid #fff; } </style>
    </head>
    <body>
    <div class="nob1">
        nob1
        <div class="nob2">
            nob2
            <div class="nob3">nob3</div>
        </div>
    </div>
    <script type="text/javascript"> var position = $(".nob2").position(); var offset = $(".nob2").offset(); console.log("position-top:" + position.top + ",position-left:" + position.left); console.log("offset-top:" + offset.top + ",offset-left:" + offset.left); var position1 = $(".nob3").position(); var offset1 = $(".nob3").offset(); console.log("position1-top:" + position1.top + ",position1-left:" + position1.left); console.log("offset1-top:" + offset1.top + ",offset1-left:" + offset1.left); </script>
    </body>
    </html>

运行结果为![这里写图片描述][20161020144240510]

如果为body设置position: relative;  
则运行结果为：![这里写图片描述][20161020145955495]

在此处再上传一张盒模型，方便描述![这里写图片描述][20161020144329504]

接下来讨论的前提都在这段代码的情况下，由结果的第一行和第二行可以看出，.position()和.offset()的结果竟然一样，可以明显看出.position()并不是相对于父元素的偏移量，而是和.offset()一样是在当前视口的相对偏移，但是第三行和第四行两者又明显的不一样。这是因为.position()是向上寻找父元素的position为relative/absolute/fixed的偏移量，并且计算的极限是margin，也就是在计算的时候他会把本元素的margin区域也算作为本元素，这个很特殊；而.offset()的计算极限是border，计算的时候会把border以内的内容算为本元素，这和一般是一样的。所以在使用的时候如果所要获取的元素的所有向上父元素中没有position为relative/absolute/fixed的并且没有margin的情况下，这两者的计算结果是一样的；但是若是所要获取的元素的所有向上父元素中没有position为relative/absolute/fixed的并且拥有margin属性，则两者差值为margin的值。

总之，.position()是相对于他的父元素的父元素的父元素的第一个position为relative/absolute/fixed的偏移量，并且计算的时候会将本元素的margin算作本元素，.offset()是在当前视口的相对偏移，并且计算的时候是以本元素的border为界限。

[20161020144240510]: /images/20220715/4ce399f2422f41928c8979c47f49ec4f.png
[20161020145955495]: /images/20220715/3015c292efca4aba893f629f3c914af8.png
[20161020144329504]: /images/20220715/7940712b7186471abb5a381159a481a3.png