欢迎大家来到IT世界,在知识的湖畔探索吧!

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

前言

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/>');

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

欢迎大家来到IT世界,在知识的湖畔探索吧!$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/