jQuery 筛选、轮播与几何测量：区别 offset、position 和滚动距离

旧笔记把过滤选择器、城市全选、轮播图和元素宽高/left/top/卷曲距离放在同一课。这里先分清集合选择与视觉布局：DOM 位置、布局位置和滚动位置不是同一坐标系，读错坐标会让定位只在某个浏览器或页面缩放下看似正确。

filter 与集合边界

.filter() 返回原集合中符合条件的元素，.not() 排除匹配项，.children() 与 .find() 分别表达直接子级和任意后代。jQuery 的 :first、:last、:eq() 等集合筛选不是所有原生 CSS 选择器的同义写法。每一步都确认选择器作用的根，避免误把页面里其他组件一起改掉。

城市选择一类控件应由原生 select、checkbox 和 label 表达。全选时同步单项状态；反选不应只改变图标；提交前读取当前选择值，并在服务端验证其合法范围。复杂多选组件要补键盘、焦点和读屏语义，不要只把文字变色。

轮播优先采用可控的原生滚动

轮播需要明确的上一张/下一张按钮、当前项提示、焦点顺序和停止自动播放的方式。移动端可用横向滚动与 CSS scroll-snap，让用户直接滑动；按钮使用 scrollIntoView() 到达目标项。若必须自动播放，应让用户暂停，并尊重减少动态效果偏好；隐藏标签页时暂停计时。

不要用几个快速切换的 opacity 动画替代状态管理：循环边界、图片加载失败、触屏手势与用户暂停都要定义清楚。轮播内容中的链接和按钮必须仍可键盘访问，不能因 overflow: hidden 被裁切或聚焦后看不见。

宽高是不同的盒模型量

jQuery .width() / .height() 返回内容区尺寸；.innerWidth() / .innerHeight() 包含 padding；.outerWidth() / .outerHeight() 包含 border，传入 true 时还包括 margin。CSS box-sizing 会影响设置宽度的解释，但不会把这些测量 API 变成同一结果。值可能是小数，不能一律 parseInt()。

const box = document.querySelector('#card');
const rect = box.getBoundingClientRect();
const documentTop = rect.top + window.scrollY;

console.log({
  viewportWidth: rect.width,
  documentTop,
  contentWidth: $(box).width(),
  outerWidth: $(box).outerWidth(true),
});

getBoundingClientRect() 给出当前视口中的边框盒；加 scrollY 才得到近似文档坐标。变换、页面缩放和视觉视口会影响测量结果。只需知道“是否进入屏幕”时用 IntersectionObserver，不要在每次 scroll 事件里读取大量布局并同步写样式。

offset、position 和 scrollTop

.offset() 以文档为参照，适合比较页面坐标；.position() 相对定位包含块/offset parent，适合同一定位容器中的元素；.scrollTop() 是元素内部滚动容器隐藏在上方的像素数。窗口滚动位置可用 window.scrollY。隐藏元素、边框、margin、transform 和滚动容器都会影响直觉，定位前先确认使用哪一个坐标系。

1. 先确定尺寸要包括 content、padding、border 还是 margin。
2. 明确目标是视口坐标、文档坐标、offset parent 坐标还是容器滚动量。
3. 在手机横竖屏、浏览器缩放、字体变大和隐藏/显示状态下复测。
4. 减少读布局后立即写布局的循环；可用 ResizeObserver/IntersectionObserver 替代轮询。

参考：jQuery width、jQuery innerWidth、jQuery outerWidth、jQuery offset、jQuery position、jQuery scrollTop、MDN getBoundingClientRect、MDN Intersection Observer。