jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

jQuery 位置函数是jQuery库中用于获取和操作元素位置与尺寸的一组方法，包括offset、innerWidth、innerHeight、outerWidth、outerHeight、scrollTop、scrollLeft等。

offset 方法

offset() 方法可返回指定元素相对于文档的位置。该方法返回一个包含两个属性 top 和 left 的对象。top 表示元素上边缘相对于文档顶部的距离，left 表示元素左边缘相对于文档左侧的距离，单位为像素。

// 获取id为myDiv的元素相对于文档顶部和左侧的距离
var offset = $("#myDiv").offset();
console.log(offset.top, offset.left); 

innerWidth 和 innerHeight 方法

innerWidth() 和 innerHeight() 方法可获取元素的内部宽度和高度，包括内容和内边距（padding），但不包括边框（border）和外边距（margin）。

// 获取id为myDiv的元素的内部宽度和高度
var width = $("#myDiv").innerWidth();
var height = $("#myDiv").innerHeight();
console.log(width, height); 

outerWidth 和 outerHeight 方法

outerWidth() 和 outerHeight() 方法可获取元素的外部宽度和高度，包括内容、内边距和边框，但不包括外边距。

这两个方法还可以接受一个布尔类型的参数，用来指定是否包括 margin。若该参数为 true，则方法返回的宽度或高度将包括外边距。

// 获取id为myDiv的元素的外部宽度和高度（不包括margin）
var width = $("#myDiv").outerWidth();
var height = $("#myDiv").outerHeight();
console.log(width, height); 

// 获取id为myDiv的元素的外部宽度和高度（包括margin）
var width = $("#myDiv").outerWidth(true);
var height = $("#myDiv").outerHeight(true);
console.log(width, height); 

scrollTop 和 scrollLeft 方法

scrollTop() 和 scrollLeft() 方法可设置或获取元素的滚动条相对于顶部或左侧的距离。

// 获取id为myDiv的元素的竖直滚动条相对顶部的距离
var top = $("#myDiv").scrollTop();
console.log(top); 

// 设置id为myDiv的元素的竖直滚动条相对顶部的距离为100像素
$("#myDiv").scrollTop(100); 

以上就是jQuery位置函数的基本用法和示例。如果有任何疑问，欢迎提出。