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

    1.jQuery 尺寸

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

    1.1 代码体验

    1. <!-- 引入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <style>
    4.     div {
    5.         width: 200px;
    6.         height: 200px;
    7.         background-color: pink;
    8.         padding: 10px;
    9.         border: 15px solid red;
    10.         margin: 20px;
    11.     }
    12. </style>
    13. <body>
    14.     <!-- HTML结构 -->
    15.     <div></div>
    16.     <!-- js 代码 -->
    17.     <script>
    18.         $(function() {
    19.             // 1. width() / height() 获取设置元素的 width和height大小
    20.             // 无参数为获取，有参数为设置
    21.             console.log($("div").width());  // 200
    22.             $("div").width(300); // 数字直接写，不需要带单位
    23.  
    24.             // 2. innerWidth() / innerHeight() 获取设置元素的 width和height + padding大小
    25.             console.log($("div").innerWidth());  // 320
    26.             $("div").innerWidth(400);
    27.  
    28.             // 3. outerWidth() / outerHeight() 获取设置元素的 width和height + padding + border大小
    29.             console.log($("div").outerWidth());  // 430
    30.             $("div").outerWidth(500);
    31.  
    32.             // 4. outerWidth(true) / outerHeight(true) 获取设置元素的 width和height + padding + border + margin大小
    33.             console.log($("div").outerWidth(true));  // 540
    34.         })
    35.     </script>
    36. </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 代码体验 

    1. <!-- 引入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     * {
    6.         margin: 0;
    7.         padding: 0;
    8.     }
    9.     
    10.     .father {
    11.         position: relative;
    12.         width: 400px;
    13.         height: 400px;
    14.         margin: 100px;
    15.         background-color: pink;
    16.         overflow: hidden;
    17.     }
    18.     
    19.     .son {
    20.         position: absolute;
    21.         top: 20px;
    22.         left: 20px;
    23.         width: 150px;
    24.         height: 150px;
    25.         background-color: purple;
    26.     }
    27. </style>
    28. <body>
    29.     <!-- HTML结构 -->
    30.     <div class="father">
    31.         <div class="son"></div>
    32.     </div>
    33.     <!-- js 代码 -->
    34.     <script>
    35.         $(function() {
    36.             // 1. 获取设置距离★★文档的位置(偏移)  offset() 无参为获取，有参为修改设置
    37.             console.log($(".son").offset()); // 得到的是一个对象，里面包含属性top和left 
    38.             console.log($(".son").offset().top); // 得到属性top的值
    39.             // 设置偏移时，以对象形式传参
    40.             /*  $(".son").offset({
    41.                  top: 200,
    42.                  left: 200
    43.              }) */
    44.  
    45.            // 2. position获取距离带有定位父级的位置(偏移)，如果没有带有定位的父级，则以文档为准
    46.             // ★★position() 只能获取，不可设置
    47.             console.log($(".son").position());
    48.         })
    49.     </script>
    50. </body>

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

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

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

    1. <!-- 引入 jQuery 文件 -->
    2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    3. <!-- css样式 -->
    4. <style>
    5.     .container {
    6.         margin: 400px auto;
    7.         width: 800px;
    8.         height: 1100px;
    9.         background-color: skyblue;
    10.     }
    11.     
    12.     .back {
    13.         display: none;
    14.         position: fixed;
    15.         top: 500px;
    16.         right: 10px;
    17.         width: 80px;
    18.         height: 150px;
    19.         background-color: pink;
    20.     }
    21. </style>
    22. <body>
    23.     <!-- HTML结构 -->
    24.     <div class="back">返回顶部</div>
    25.     <div class="container"></div>
    26.     <!-- js 代码 -->
    27.     <script>
    28.         $(function() {
    29.             // scrollTop() 有参数就是设置位置，这里设置初始位置是头部被卷去100的位置
    30.             $(document).scrollTop(100);
    31.             // 被卷去的头部 scrollTop()   被卷去的左侧 scrollLeft()
    32.             // 页面滚动事件scroll()
    33.             // （1）在滚动之前获取container盒子距离文档顶部的值
    34.             let boxTop = $(".container").offset().top;
    35.             $(window).scroll(function() {
    36.                     //  （2）获取页面头部被卷去的值
    37.                     let top = $(document).scrollTop();
    38.                     //  （3）如果被卷去的值大于等于boxTop，则淡入返回顶部盒子
    39.                     if (top >= boxTop) {
    40.                         $(".back").fadeIn();
    41.                         // 否则淡出返回顶部盒子
    42.                     } else {
    43.                         $(".back").fadeOut();
    44.                     }
    45.                 })
    46.                 // (4) 实现返回顶部的效果
    47.             $(".back").click(function() {
    48.                 // 本质就是被卷去的头部值为0
    49.                 // 只有元素才可以做动画
    50.                 $("body,html").stop().animate({
    51.                     scrollTop: 0
    52.                 }, 500)
    53.             })
    54.         })
    55.     </script>
    56. </body>

    注意：

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

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

  • 相关阅读:
    【虚拟现实】二、主要的AR/VR硬件设备
    【C++】构造函数与类的组合以及初始化
    数据库、数据中台、数据仓库、数据湖区别
    Linux虚拟机和开发板scp命令互传文件
    数据治理之springboot项目入门
    MIPI CSI-2笔记（17） -- 数据格式（RGB图像数据）
    Tomcat的详解和使用
    Java-网络编程
    设计模式之适配器模式
    UNIX环境高级编程-第五章
  • 原文地址：https://blog.csdn.net/JJ_Smilewang/article/details/125624697