jQuery常用API--尺寸、位置操作

1.jQuery 尺寸

① 以上参数为空时，则是获取相应元素对应的值，返回的是数字型。
② 如果参数为数字，则是修改相应值
③ 参数可以不必写单位

1.1 代码体验

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 10px;
        border: 15px solid red;
        margin: 20px;
    }
</style>
<body>
    <!-- HTML结构 -->
    <div></div>
    <!-- js 代码 -->
    <script>
        $(function() {
            // 1. width() / height() 获取设置元素的 width和height大小
            // 无参数为获取，有参数为设置
            console.log($("div").width());  // 200
            $("div").width(300); // 数字直接写，不需要带单位

            // 2. innerWidth() / innerHeight() 获取设置元素的 width和height + padding大小
            console.log($("div").innerWidth());  // 320
            $("div").innerWidth(400);

            // 3. outerWidth() / outerHeight() 获取设置元素的 width和height + padding + border大小
            console.log($("div").outerWidth());  // 430
            $("div").outerWidth(500);

            // 4. outerWidth(true) / outerHeight(true) 获取设置元素的 width和height + padding + border + margin大小
            console.log($("div").outerWidth(true));  // 540
        })
    </script>
</body>

2. jQuery 位置

2.1 offset() 设置或获取元素偏移

① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
② 该方法有2个属性left、top。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离
③ 可以设置元素的偏移：offset({top:100 , left: 60})，以对象的形式配置参数

2.2 position() 获取元素偏移

① position() 方法用于返回被选元素相对于带有定位的父级的偏移坐标，如果父级都没有定位，则以文档为准。
② 该方法只可获取，不可设置

2.3 代码体验

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .father {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 100px;
        background-color: pink;
        overflow: hidden;
    }
    
    .son {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 150px;
        height: 150px;
        background-color: purple;
    }
</style>
<body>
    <!-- HTML结构 -->
    <div class="father">
        <div class="son"></div>
    </div>
    <!-- js 代码 -->
    <script>
        $(function() {
            // 1. 获取设置距离★★文档的位置(偏移)  offset() 无参为获取，有参为修改设置
            console.log($(".son").offset()); // 得到的是一个对象，里面包含属性top和left 
            console.log($(".son").offset().top); // 得到属性top的值
            // 设置偏移时，以对象形式传参
            /*  $(".son").offset({
                 top: 200,
                 left: 200
             }) */

           // 2. position获取距离带有定位父级的位置(偏移)，如果没有带有定位的父级，则以文档为准
            // ★★position() 只能获取，不可设置
            console.log($(".son").position());
        })
    </script>
</body>

2.4 scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧

① scrollTop() 方法设置或返回元素被卷去的头部；
② scrollLeft() 方法设置或返回元素被卷去的左侧；

2.5 小案例--返回页面顶部

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    .container {
        margin: 400px auto;
        width: 800px;
        height: 1100px;
        background-color: skyblue;
    }
    
    .back {
        display: none;
        position: fixed;
        top: 500px;
        right: 10px;
        width: 80px;
        height: 150px;
        background-color: pink;
    }
</style>
<body>
    <!-- HTML结构 -->
    <div class="back">返回顶部</div>
    <div class="container"></div>
    <!-- js 代码 -->
    <script>
        $(function() {
            // scrollTop() 有参数就是设置位置，这里设置初始位置是头部被卷去100的位置
            $(document).scrollTop(100);
            // 被卷去的头部 scrollTop()   被卷去的左侧 scrollLeft()
            // 页面滚动事件scroll()
            // （1）在滚动之前获取container盒子距离文档顶部的值
            let boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                    //  （2）获取页面头部被卷去的值
                    let top = $(document).scrollTop();
                    //  （3）如果被卷去的值大于等于boxTop，则淡入返回顶部盒子
                    if (top >= boxTop) {
                        $(".back").fadeIn();
                        // 否则淡出返回顶部盒子
                    } else {
                        $(".back").fadeOut();
                    }
                })
                // (4) 实现返回顶部的效果
            $(".back").click(function() {
                // 本质就是被卷去的头部值为0
                // 只有元素才可以做动画
                $("body,html").stop().animate({
                    scrollTop: 0
                }, 500)
            })
        })
    </script>
</body>

注意：

① 所谓的返回顶部本质就是被卷去的头部值为0 ，即scrollTop=0.

② 只有元素才可以做动画，因此不能使用文档document，而是使用body和html元素