1.尺寸
语法 | 用法 |
---|---|
width() / height() | 取得匹配元素宽度和高度值只算width / height |
innerWidth() / innerHieght() | 取得匹配元素宽度和高度值包含 padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值包含 padding、border |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值包含padding、borde、margin |
以上参数(括号里)为空,则是获取相应值,返回的是数字型。
如果参数(括号里)为数字,则是修改相应值。
参数可以不带单位
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
2.位置
(1)offset()设置或获取元素偏移
offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离。
可以设置元素的偏移:offset({ top: 10, left: 30 });
(2)position()获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
这个方法只能获取不能设置偏移
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
// 1. 获取设置距离文档的位置(偏移) offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
})
</script>
</body>
(3) scrollTop0/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。
scrollLeft() 方法设置或返回被选元素被卷去的左侧。
返回顶部动画选中的部分不能是文档而是 html和body元素做动画
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100);//设置页面加载后的位置
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
滚动时,判断是否要显示侧边导航栏,以及到达指定位置时,侧边导航栏有背景变化;点击侧边导航栏,到达指定位置。
$(function() {
// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
// 节流阀 互斥锁
var flag = true;
// 1.显示隐藏电梯导航
var toolTop = $(".recommend").offset().top;
toggleTool();//调用函数,是否显示出侧边导航栏
function toggleTool() {//当到达指定位置,显示侧边导航栏
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
$(window).scroll(function() {
toggleTool();
// 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名(背景颜色)
if (flag) {//当点击侧边导航栏时,不执行滚动才触发的效果
$(".floor .w").each(function(i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
console.log(i);
$(".fixedtoolli").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function() {
flag = false;//当点击时,将滚动效果的节流阀设置为false,即不执行滚动效果
console.log($(this).index());
// 当我们每次点击小li 就需要计算出页面要去往的位置
// 选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $(".floor .w").eq($(this).index()).offset().top;
// 页面动画滚动效果
$("body, html").stop().animate({
scrollTop: current
}, function() {
flag = true;
});
// 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名
$(this).addClass("current").siblings().removeClass();
})
})