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元素