[TOC] # 7.1 jQuery 尺寸 | 语法 | 用法 | | --- | --- | | width()/height() | 取得匹配元素宽度和高度值只算width 1 height | | innerWidth() / innerHieght() | 取得匹配元素宽度和高度值包含padding | | outerWidth() / outerHeight() | 取得匹配元素宽度和高度值包含padding、border | | outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值包含padding、borde、 margin | ~~~ ●以上参数为空,则是获取相应值,返回的是数字型。 ●如果参数为数字,则是修改相应值。 ●参数可以不必写单位。 ~~~ # 7.2 jQuery 位置 位置主要有三个:offset()、position()、 scrollTop() / scrolLeft() ## 1\. offset()设置或获取元素偏移 ①offset( 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。 ②该方法有2个属性left. top. offset0.top 用于获取距离文档顶部的距离, ffset0.left用于获取距离文档左侧的距离。 ③可以设置元素的偏移: offset({ top: 10, left: 30});  ## 2\. position()获取元素偏移 ①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。 ## 3\. scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧  ①scrollTop() 方法设置或返回被选元素被卷去的头部。  # 案例:带有动画的返回顶部 ①核心原理:使用animate动画返回顶部。 ②animate动画函数里面有个scrollITop 属性,可以设置位置 ③但是是元素做动画,因此$( "body,html" ).animate({scrolITop: 0})   # 2.案例:品优购电梯导航  html   ## 代码实验  1.1.优化版 2.2.优化版  3.当前页面滚动 ，电梯导航也跟着发生变化   4.页面优化，节流阀，互斥锁