jquery高级教程—jquery 教程 收藏 0

18岁的 jQuery 依然坚挺？ v3.7.0 最新发布！

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

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

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

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

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

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

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

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

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

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

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

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

焦点和 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/

为何强烈推荐 Vue/React/jQuery 框架的强大动态表单 SurveyJS？

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

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.

SurveyJS 表单库是一个免费的 MIT 许可客户端组件，允许开发者在任何 JavaScript 应用程序中渲染基于 JSON 的动态表单、收集响应并将所有表单数据提交到目标数据库。

开发者可以将 SurveyJS 用于任意长度和复杂程度的多页表单、弹出式调查、测验、计分调查、计算器表单等。SurveyJS 表单库对 React、Angular、Vue 和 Knockout 等框架都具有原生支持，jQuery 通过 Knockout 版本的包装器也能获得支持。

SurveyJS 产品系列还包括一个强大的表单构建器库，可自动生成 JSON 格式的表单配置文件。表单构建器具有拖放式 UI、CSS 主题编辑器和用于条件逻辑和表单分支的 GUI。

目前 SurveyJS 在 Github 通过 MIT 协议开源，有超过 4k 的 star、1k 的 fork、代码贡献者 150+、妥妥的前端优质开源项目。

SurveyJS Form Library for React 由两个 npm 包组成：survey-core（独立于平台的代码）和 survey-react-ui（渲染代码）。首先需要运行以下命令安装 survey-react-ui，survey-core 包将作为依赖项自动安装。

SurveyJS 表单库附带了几个预定义主题（如下所示）以及基于 CSS 变量的灵活主题自定义机制。

接着需要指定模型，以下模型架构声明了两个文本问题，每个问题都有一个标题和一个名称。标题显示在屏幕上，名称用于在代码中识别问题。

接着可以导入 Survey 组件并渲染表单，将其添加到模板中：

SurveyJS 与其他框架，比如：Angular、Vue 、 Knockout、jQuery 等的集成也非常简单，这里不再赘述，可以参考文末资料。

https://github.com/surveyjs/survey-library

https://surveyjs.io/form-library/documentation/get-started-react

https://surveyjs.io/documentation/surveyjs-architecture

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com