2019-05-05 JQuery的位置和滚动条：

一，宽、高

jQuery中获取宽高，最经典的就是width()和height()。因为CSS盒子模型的缘故，元素的宽高分为很多。以下以获取元素的宽为例：

$("div").width(); //内容的宽

$("div").innerWidth(); //内容的宽 + 左内边距 + 右内边距

$("div").outerWidth(); //内容的宽 + 左内边距 + 右内边距 + 左边框 + 右边框

$("div").outerWidth(true); //内容的宽 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

对于元素的高是同样的道理。

同时需要注意的是，(window).height()获取的是浏览器窗口的高，如果调整浏览器的高度，则其值会变。

(document).height()获取的是整个文档的高，如果调整浏览器的高度，则其值不会变。

1.对于(document)来说，他们的width()、innerWidth()和outerWidth()的值都是一样的。

2. width()和css(“width”)的区别在于，后者获取的值带有单位

二，位置

jQuery中，与元素位置相关的有两个函数：offset()和position()。
这两个函数都返回一个对象，这个对象中含有两个属性：left和top。

这两个函数不同点在于，offset是元素相对于文档的位置，而position是元素相对于其含有position属性的最近祖先元素的位置。

offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。

position()：返回包含top和left两个属性的对象，相对于最近的已定位的包含元素的位置。若无，则相对于document。只对可见元素有效，注意ele{visibility：hidden}也属于可见元素。

三，鼠标相对于页面的位置

event.pageX ：鼠标相对于页面左边缘的距离。

event.pageY ：鼠标相对于页面上边缘的距离。

四，滚动条

主要有两个函数scrollTop()和scrollLeft()。
对于普通元素来说，scrollTop()就是该元素滚动上去的距离，对于$(window)来说，就是整个网页滚动上去的距离。

$("div").scrollTop();

$(window).scrollTop();