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

最新推荐文章于 2021-02-24 16:36:52 发布

樊小书生

最新推荐文章于 2021-02-24 16:36:52 发布

阅读量1k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/fxss5201/article/details/52873029

版权

jQuery 专栏收录该内容

21 篇文章 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>

运行结果为这里写图片描述

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

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

接下来讨论的前提都在这段代码的情况下，由结果的第一行和第二行可以看出，.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为界限。