大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

前言

jQuery v3.7.0 已发布，此版本包含众多内容更新，比如：错误修复、新方法和性能改进。 jQuery v3.7.0 放弃了长期使用的选择器引擎 Sizzle，同时将它移到了 jQuery 核心中，从而有助于为未来 jQuery 版本选择的进一步变更做好准备。 但这个技术方案确实使得 jQuery 减少了几个字节的体积，因为 Sizzle 需要支持比 jQuery 更旧的浏览器。

像往常一样，该版本可在 cdn 和 npm 包管理器上下载安装， 其他第三方 CDN 很快也会集成但可能需要一定的时间。

jQuery v3.7.0 新特性

新方法.uniqueSort()

一些 API，如 .prevAll()以相反的顺序返回元素，这在与包装方法一起使用时可能会导致一些令人困惑的行为。 例如，

$elem.prevAll().wrapAll('<p/>');

上面的代码会按预期包装所有元素，但会以相反的顺序将这些元素写入 DOM。 为了防止破坏现有代码的方式解决这个问题，jQuery 记录了 .prevAll() 和类似方法返回倒序集合，这在许多情况下仍然是可取的。 同时 jQuery v3.7.0 还添加了一个新方法，如 .uniqueSort()，该方法与 jQuery.uniqueSort()行为类似。

因此，之前的示例将变为：

$elem.prevAll().uniqueSort().wrapAll('<p/>');

并且 DOM 中的元素顺序将保持不变。

添加了一些无单位的 CSS 属性

jQuery 3.7.0 添加了对更多 CSS 属性的支持，这些属性在没有单位的情况下不应自动添加“px”。 例如.css('aspect-ratio', 5) 会导致 CSS aspect-ratio: 5px;，这次更改很多都来自于 React 的启发。

export const isUnitlessNumber = {
  animationIterationCount: true,
  aspectRatio: true,
  borderImageOutset: true,
  borderImageSlice: true,
  borderImageWidth: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  columns: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridArea: true,
  gridRow: true,
  gridRowEnd: true,
  gridRowSpan: true,
  gridRowStart: true,
  gridColumn: true,
  gridColumnEnd: true,
  gridColumnSpan: true,
  gridColumnStart: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  scale: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,
  // SVG-related properties
  fillOpacity: true,
  floodOpacity: true,
  stopOpacity: true,
  strokeDasharray: true,
  strokeDashoffset: true,
  strokeMiterlimit: true,
  strokeOpacity: true,
  strokeWidth: true,
};

值得注意的是，jQuery v4.0 将改变处理无单位 CSS 属性的方式，不是依赖 CSS 属性列表来避免添加“px”，而是有一个属性列表，当没有传递任何单位时，肯定要添加“px”， 那样更具前瞻性。

操作性能提升

jQuery 3.7.0 在使用 .append() 等操作方法时为某些用例带来了可衡量的性能改进。 当删除不再支持的浏览器的支持测试时，这意味着根本不再需要运行针对文档更改的检查。

从本质上讲，这导致了 0% 到 100% 之间的任何加速。 最显著的加速出现在一些罕见的情况下，在这些情况下，用户经常在不同文档之间切换上下文，可能是通过跨多个 iframe 运行操作。

outerHeight 中的负边距

jQuery v3.3.0 修复了一个问题，在 .innerWidth() 和 .innerHeight() 的计算中包含滚动条。 但是，该修复没有考虑负边距，这意味着 .outerWidth(true) 和 .outerHeight(true) 不再考虑负边距。 在 3.7.0 中通过将边距计算与滚动条调整分开来解决了这个问题。

在 IE 中使用不同的原生焦点事件

焦点和 blur 事件可能是 jQuery 必须跨浏览器处理的最复杂的事件。 jQuery 3.4.0 在修复通过焦点事件传递数据的问题时引入了一些小的回归，在 jQuery 3.7.0 中移除了这些修改。

但是，需要指出 IE 中可能发生的重大变化。 在所有版本的 IE 中，焦点和 blur 事件都是异步触发的。 在所有其他浏览器中，这些事件是同步触发的，IE 中的异步行为导致了一些问题。 解决方法是更改本机使用的事件。 幸运的是，focusin 和 focusout 在 IE 中是同步运行的，所以现在在 IE 中通过 focusin 模拟焦点，通过 focusout 模拟 blur。 这一更改使 jQuery 能够依赖 IE 中的同步焦点事件，这解决了很多问题。

参考资料

https://blog.jquery.com/2023/05/11/jquery-3-7-0-released-staying-in-order/