jQuery 尺寸、位置操作

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法	用法
`width()/height()`	取得匹配元素宽度和高度值只算width/height
`innerWidth()/innerHeight()`	取得匹配元素宽度和高度值包含padding
`outerWidth()/outHeight()`	取得匹配元素宽度和高度值包含padding、border
`outerWidth(true)/outerHeight(true)`	取得匹配元素宽度和高度值包含padding、border、margin

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

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;padding: 10px;border: 15px solid red;margin: 20px;}</style><script src="jquery.min.js"></script>
</head><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 + marginconsole.log($("div").outerWidth(true));})</script>
</body></html>

注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

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

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

position() 获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
该方法有2个属性left、top。position().top用于获取距离定位父级顶部的距离，position().left用于获取距离定位父级左侧的距离。
该方法只能获取。
注意: 这个方法的特点与offsetLeft和offsetTop一致

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

scrollTop()方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><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><script src="jquery.min.js"></script>
</head><body><div class="father"><div class="son"></div></div><script>$(function() {// 1. 获取设置距离文档的位置（偏移） offsetconsole.log($(".son").offset());console.log($(".son").offset().top);// $(".son").offset({//     top: 200,//     left: 200// });// 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准// 这个方法只能获取不能设置偏移// 与offsetLeft和offsetTop一致console.log($(".son").position());// $(".son").position({//     top: 200,//     left: 200// });})</script>
</body></html>

案例：带有动画的返回顶部

1.核心原理：使用animate动画返回顶部。
2.animate动画函数里面有个scrollTop 属性，可以设置位置
3.但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {height: 2000px;}.back {position: fixed;width: 50px;height: 50px;background-color: pink;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}</style><script src="jquery.min.js"></script>
</head><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></html>

案例：品优购电梯导航（上）

1.当我们滚动到今日推荐模块，就让电梯导航显示出来
2.点击电梯导航页面可以滚动到相应内容区域
3.核心算法：因为电梯导航模块和内容区模块一一对应的
4.当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
5.就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
6.然后执行动画即可

案例：品优购电梯导航（下）

1.当我们点击电梯导航某个小li，当前小li 添加current类，兄弟移除类名
2.当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。
3.触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
4.需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
5.判断的条件：被卷去的头部大于等于内容区域里面每个模块的offset().top
6.就利用这个索引号找到相应的电梯导航小li添加类。

完整代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 楼层区 start --><div class="floor"><div class="jiadian w"><div class="box-hd"><h3>家用电器</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="shouji w"><div class="box-hd"><h3>手机通讯</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="diannao w"><div class="box-hd"><h3>电脑办公</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div><div class="jiaju w"><div class="box-hd"><h3>精品家具</h3><div class="tab-list"><ul><li><a href="#" class="style-red">热门</a>|</li><li><a href="#">大家电</a>|</li><li><a href="#">生活电器</a>|</li><li><a href="#">厨房电器</a>|</li><li><a href="#">个护健康</a>|</li><li><a href="#">应季电器</a>|</li><li><a href="#">空气/净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><ul class="tab-con"><li class="w209"><ul class="tab-con-list"><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><img src="upload/floor-1-1.png" alt=""></li><li class="w329"><img src="upload/pic1.jpg" alt=""></li><li class="w219"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-2.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div></li><li class="w220"><div class="tab-con-item"><a href="#"><img src="upload/floor-1-5.png" alt=""></a></div><div class="tab-con-item"><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></li></ul><!-- <ul class="tab-con"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> --></div></div></div><!-- 楼层区 end --><!-- 固定电梯导航 --><div class="fixedtool"><ul><li class="current">家用电器</li><li>手机通讯</li><li>电脑办公</li><li>精品家具</li></ul></div>
</body>
</html>

index.css

/*floor 楼层区*/.box-hd {height: 30px;border-bottom: 2px solid #c81623;margin-top: 25px;
}.box-hd h3 {float: left;font-size: 18px;color: #c81623;
}.tab-list {float: right;line-height: 30px;
}.tab-list li {float: left;
}.tab-list li a {margin: 0 15px;
}.box-bd {height: 360px;
}.w209 {width: 209px;background-color: #f9f9f9;
}.w329 {width: 329px;
}.w219 {width: 219px;border-right: 1px solid #ccc;
}.w220 {width: 220px;border-right: 1px solid #ccc;
}.tab-con li {float: left;height: 360px;
}.tab-con-item {border-bottom: 1px solid #ccc;
}.tab-con-list {overflow: hidden;margin-bottom: 15px;
}.tab-con-list li {width: 86px;height: 32px;line-height: 32px;border-bottom: 1px solid #ccc;margin-left: 10px;text-align: center;
}.box-bd li {overflow: hidden;
}.box-bd img {/*过渡写到本身上， 谁做动画，给谁加*/transition: all .2s;
}/*我们鼠标经过图片 往右走 8px*/.box-bd img:hover {margin-left: 8px;
}/*电梯导航*/.fixedtool {position: fixed;top: 100px;left: 50%;margin-left: -676px;width: 66px;background-color: #fff;display: none;
}.fixedtool li {height: 32px;line-height: 32px;text-align: center;font-size: 12px;border-bottom: 1px solid #ccc;cursor: pointer;
}.fixedtool .current {background-color: #c81623;color: #fff;
}

index.js

$(function() {//节流阀，互斥锁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) {console.log($(ele).offset().top);// if ($(document).scrollTop() >= $(ele).offset().top) {// console.log($(ele).outerHeight());// if (Math.ceil($(document).scrollTop()) >= Math.floor($(ele).offset().top)) {if ($(document).scrollTop() >= $(ele).offset().top &&$(document).scrollTop() < $(ele).offset().top + $(ele).outerHeight()) {console.log(i);$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();}})}});// 第二种方式// var scrollIndex = 0;// $(window).scroll(function() {//     toggleTool();//     // $(".floor .w").each(function(i, ele) {//     //     if ($(document).scrollTop() >= $(ele).offset().top) {//     //         console.log(i);//     //         $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();//     //     }//     // });//     // 监听界面滚动距离，如果滚动距离大于等于第一块内容距离顶部的距离时，让第一个li高亮显示//     if ($(document).scrollTop() >= $(".floor .w").eq(0).offset().top()){//         $(".fixedtool li").eq(0).addClass("current").siblings().removeClass();//     }if($(document).scrollTop() >= $(".floor .w").eq(1).offset().top()){//         $(".fixedtool li").eq(1).addClass("current").siblings().removeClass();//     }if($(document).scrollTop() >= $(".floor .w").eq(2).offset().top()){//         $(".fixedtool li").eq(2).addClass("current").siblings().removeClass();//     }if($(document).scrollTop() >= $(".floor .w").eq(3).offset().top()){//         $(".fixedtool li").eq(3).addClass("current").siblings().removeClass();//     }//     // 简化版代码//     if ($(document).scrollTop() >= $(".floor .w").eq(0).offset().top) {//         scrollIndex = 0;//     }//     if ($(document).scrollTop() >= $(".floor .w").eq(1).offset().top) {//         scrollIndex = 1;//     }//     if ($(document).scrollTop() >= $(".floor .w").eq(2).offset().top) {//         scrollIndex = 2;//     }//     if ($(document).scrollTop() >= $(".floor .w").eq(3).offset().top) {//         scrollIndex = 3;//     }//     $(".fixedtool li").eq(scrollIndex).addClass("current").siblings().removeClass();// });// 2. 点击电梯导航页面可以滚动到相应内容区域$(".fixedtool li").click(function() {flag = false;console.log($(this).index());// 当我们每次点击小li 就需要计算出页面要去往的位置 // 选出对应索引号的内容区的盒子 计算它的.offset().topvar 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();})
})

电梯导航-菜单乱跳问题分析：

总结

尺寸

语法	用法
`width()/height()`	取得匹配元素宽度和高度值只算width/height
`innerWidth()/innerHeight()`	取得匹配元素宽度和高度值包含padding
`outerWidth()/outHeight()`	取得匹配元素宽度和高度值包含padding、border
`outerWidth(true)/outerHeight(true)`	取得匹配元素宽度和高度值包含padding、border、margin

位置：offset()、position()、scrollTop()、scrollLeft()

jQuery第二天学习总结—— jQuery 尺寸、位置操作相关推荐

jQuery尺寸位置操作
jQuery 尺寸语法用法 width() / height() 取得匹配元素宽度和高度值只算width / height innerWidth() / innerHieght() 取得匹配元素 ...
跟我一起学jQuery——第二集（未完待续..）
<锋利的JQuery>第二版阅读笔记-第二章跟我一起学jQuery--第二集代码风格 jQuery选择器接下来,就要开始正式学习jQuery的各种使用了.但是没有规矩不成方圆,所以我 ...
【jQuery学习】—jQuery操作元素位置
[jQuery学习]-jQuery操作元素位置一.position方法作用:返回相对某个元素的偏移量格式:元素.position() 返回值包含top属性和left属性的对象如果祖先元素中没有 ...
第二十二篇 jQuery 学习4 内容和属性
jQuery 内容和属性这节课,我们学习使用jQuery来控制元素的内容.值和属性. html() 控制所选元素的内容(包括HTML标记): text() 控制所选元素的内容: val() 控制 ...
jQuery源码学习第二天--jQuery的extend扩展
Jquery中的extend扩展一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...
第四篇前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
JQuery 基础知识学习（详尽版）
JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...
web前端学习笔记——JQuery
web前端开发基础第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...

jQuery第二天学习总结—— jQuery 尺寸、位置操作

jQuery 尺寸、位置操作

jQuery 尺寸操作

jQuery 位置操作

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

position() 获取元素偏移

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

示例代码

案例：带有动画的返回顶部

案例：品优购电梯导航（上）

案例：品优购电梯导航（下）

总结

jQuery第二天学习总结—— jQuery 尺寸、位置操作相关推荐

最新文章

热门文章

jQuery第二天学习总结—— jQuery 尺寸、位置操作

jQuery 尺寸、位置操作

jQuery 尺寸操作

jQuery 位置操作

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

position() 获取元素偏移

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

示例代码

案例：带有动画的返回顶部

案例： 品优购电梯导航（上）

案例：品优购电梯导航（下）

总结

jQuery第二天学习总结—— jQuery 尺寸、位置操作相关推荐

最新文章

热门文章

案例：品优购电梯导航（上）