查看jquery版本,jquery 是否显示 收藏 0

强劲新版本来袭！jQuery 4.0.0、Rsbuild 0.4、Shiki v1.0发布！

随着 React、Vue、Angular 三大框架的流行，新增的站点使用 jQuery 已经比较少了，但是存量的站点使用 jQuery 的量级还是非常的大。从网站 javascript 库使用统计的历史趋势可以看出，jQuery 的使用占比在 77% 以上，仍处于高位。

jQuery 4.0.0 已经开发了很长时间，现在已经可以发布测试版了！该版本涵盖了很多内容，开发团队很高兴看到它的发布。开发团队进行了错误修复、性能改进和一些重大变更。毕竟，移除了对 IE<11 的支持！尽管如此，希望对用户造成的影响微乎其微。

许多破坏性更改是团队多年来一直想做的，但在补丁或小版本中无法实现。jQuery 开发团队删减了遗留代码，删除了一些以前废弃的 API，删除了一些从未记录的公共函数的内部参数，并放弃了对一些过于复杂的 \”神奇\” 行为的支持。

jQuery 团队将在最终版本发布前发布一份全面的升级指南，概述移除的代码以及如何迁移。jQuery Migrate 插件也将随时提供帮助。现在，请试用测试版，如果遇到任何问题，请告知我们。

jQuery 4.0 不再支持 IE 10 及更老版本。有些人可能会问，为什么不取消对 IE 11 的支持呢？我们计划分阶段取消支持，下一步将在 jQuery 5.0 中进行。现在，我们将从移除支持IE 11以上版本的代码开始，在一个PR中减少-867 gzipped字节！

jQuery 4.0还放弃了对其他旧版浏览器的支持，包括 Edge Legacy、iOS <11、Firefox <65 和 Android 浏览器。您无需进行任何更改。如果您需要支持这些浏览器，只需坚持使用 jQuery 3.x。

更多参考：https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/

Rsbuild 是基于 Rspack 的构建工具，旨在成为增强版的 Rspack CLI，更加容易上手和开箱即用。Rsbuild 是 Webpack 应用迁移到 Rspack 的最佳方案，他能帮助你减少 90% 配置并获得 10 倍构建速度。

Rsbuild v0.4 版本提供内置的模块联邦支持。此外，还包含一些 API 的不兼容更新，主要特性如下：

• 开箱即用的模块联合
• 改进插件 Hook API
• 改进性能
• 支持 Rsdoctor
• 支持设置装饰器版本

Rsbuild 现在提供一个内置的 moduleFederation 选项，这将使得在 Rsbuild 中配置模块联邦变得更加容易。

当你使用该选项时，Rsbuild 会自动修改默认的 publicPath 和 splitChunks 配置，使模块联邦可以开箱即用。

在 Rsbuild 插件中使用 hook 时，现在可以通过 order 字段来声明 hook 的顺序：

loadConfig 方法现在会返回配置内容和配置文件的路径：

• 减少 deepmerge 性能开销
• 减少对 core-js 的 require.resolve 性能
• 移除重复的 autoprefixer 插件
• 升级 webpack-bundle-analyzer 以移除 lodash 依赖

更多参考：https://github.com/web-infra-dev/rsbuild/releases/tag/v0.4.0

Shiki 是一个轻量且强大的语法高亮工具，由著名的轮子大师 antfu 打造。

Shiki v1.0 是一次重大重写，解决了大部分长期存在的问题。之前称为 Shikiji，现在合并回 Shiki。主要亮点如下：

• 完全支持 ESM，不再需要静态资产或 CDN 设置
• 不依赖文件系统，与平台无关，可用于 Node.js、浏览器和其他任何现代运行时。
• 内置双主题，有效支持明暗模式
• 变形和装饰 API，最大限度提高可定制性
• 官方 rehype 和 markdown-it 插件
• TwoSlash 整合现在是 Shiki 转换器而非包装器
• 更多主题和更好的语言支持。作为独立软件源维护：https://github.com/shikijs/textmate-grammars-themes
• 新文档：https://shiki.style

更多参考：https://github.com/shikijs/shiki/releases/tag/v1.0.0

你可能不敢想象，2025 年，jQuery要更新到 4.0 了

让人难以置信的是，jQuery，这个曾经帮助无数开发者简化 DOM 操作、事件处理和动画效果的 JavaScript 库，至今仍在更新。自从 2006 年 8 月震撼亮相以来，它已走过了长达 19 年的路程。还记得么？他的作者是：John Resig，这个年轻的小伙子也变成老大叔了。

John Resig从小伙变大叔

而现在，即便在 React、Vue 这样的现代框架盛行的今天，或者AI都满天飞的今天jQuery 仍在更新，你觉得神奇不神奇？根据官方在最近的2024年7月17日博客《Second Beta of jQuery 4.0.0》中发布的消息，jQuery 4.0.0 的第二个测试版已经推出。这一版本不仅修复了众多已知问题，提高了性能，还加入了一些响应现代网页需求的新特性。例如，它现在提供了更强大的选择器和更精细的错误处理机制，以及对现代 JavaScript 特性的支持，显示了它适应时代变迁的能力。

jQuery官网2024年7月17日博客《Second Beta of jQuery 4.0.0》

不知道诸位大佬们最后在使用jQuery的时候是什么版本呢？是1.x还是2.x还是3.x呢？不过3.x目前来说已经更新马上9年了…因为发布的时间是2016-06-09。

jQuery官网2016-06-09发布的3.0正式版

怎么样？有没有一种魔兽怀旧服的感觉？估计也是目前时间最长的单版本更新记录了，当然jQuey也是目前前端维护时间最长的一个库了，就算包含框架也是，因为毕竟人家占位早啊。值得一提的是一起同时期的MooTools库早就断更了，

接下来，我来大家来一波jQuery版本回忆录，带着各位大佬找回你失去的青春：

所以不出意外的话，2025年就会更新正式的4.0.0的正式版了。不过确实这份持续更新的承诺，不仅令人敬佩，也是对开发社区不断支持的回应。每一个新的版本，都是对开发者需求的聆听和对技术发展的响应。jQuery 的坚持，不仅是技术的坚持，更是一种文化和精神的传承，也是很多开发者们逝去的青春啊。

手把手带你快速入门jQuery（建议收藏！！！）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

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