7.1 jQuery尺寸
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小 不包括border和padding
console.log($("div").width());//200
// $("div").width(300);里面有参数那就是修改
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());//220
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());//250
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));//290
})
</script>
</body><style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>7.2 jQuery位置
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移） offset 与父盒子无关
//获取
console.log($(".son").offset()); //{top: 110, left: 110} 返回一个对象
console.log($(".son").offset().top); //100 得到对象的top属性
//设置 子盒子距离文档的顶部200px,左部200px
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());//{top: 10, left: 10} 返回一个对象
// $(".son").position({写法错误
// top: 200,
// left: 200
// });
})
</script>
</body><style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
position: absolute;
left: 10px;
top: 10px;
}
</style>
返回顶部案例
css中先将返回顶部的盒子隐藏起来了
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() 不仅可以获取值，还可以设置值
// 页面滚动事件 scroll
var boxTop = $(".container").offset().top; //蓝色盒子最开始距离文档顶部的距离
$(window).scroll(function() {
console.log($(document).scrollTop()); //文档被卷去了多少
if ($(document).scrollTop() >= boxTop) { //当页面被卷去的头部 大于等于 蓝色盒子最开始距离文档顶部的距离 时
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
//无动画
// $(document).scrollTop(0);
//带有动画地返回顶部
$("body, html").stop().animate({ //animate必须是对元素做动画
scrollTop: 0
});
//错误写法
//animate必须是对元素做动画 document是文档不是元素 不能是文档而是 html和body元素做动画
// $(document).stop().animate({
// scrollTop: 0
// });
})
})
</script>
</body>原文地址：https://www.cnblogs.com/deer-cen/p/12362685.html
时间： 2024-08-25 21:10:39