介绍
jQuery 是一个免费、开源的，语法设计可以让开发者觉得使用更加便捷的JavaScript 函数库，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 AJAX 以及其他功能。
要使用 jQuery，需要下载 jQuery lib 或者通过 CDN 导入。
大部分的前端lib都是有两个版本可供下载，一个是产品版，用于实际的网站中，已被精简和压缩；另一个是开发版，用于测试和开发，有可读的代码。
例如vue，当然Jquery也是如此
| 版本型号 | 文件名 | 大小 | 说明 |
|---|---|---|---|
| 开发版 | jquery.js | 128KB | 完整无压缩版本。主要用于调试、学习和开发。 |
| 发布版 | jquery.min.js | 88KB | 代码经过压缩，主要应用于发布的产品和项目。 |
建议在开发时使用开发版，debug更方便，开发完毕进行项目发布时，再将开发版替换成发布版，开发版本与发布本除压缩外没有任何区别的的，不过像是vue.js发布本会关闭掉wrong提示
目前，jQuery 有三大版本：
1.x ：兼容 IE6/7/8，官方只做 BUG 维护，功能不再新增。最终版本：1.12.4 （截至2021 年 1 月 21 日）；
2.x ：不兼容 IE6/7/8，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 ，最终版本：2.2.4 （截至2022 年 1 月 21 日）；
3.x ：不兼容 IE6/7/8，只支持最新的浏览器。因为很多老的 jQuery 插件不支持这个版本，所以一般不会使用 3.x 版本的但我个人比较喜欢使用新版。目前该版本是官方主要更新维护的版本。
快速上手
使用cdn导入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
案例快速上手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getStartedQuickly</title>
<!-- jquery from cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(function () {
alert('您好！')
})
</script>
</head>
<body>
</body>
</html>
运行结果
对象与DOM对象
这里的 $(function(){}) 是 jquery $(document).read() 方法的简写
在编写 jQuery 程序时，美元符号 $ 和关键字 jQuery 是等价的
以下为 $(function(){}) 方法和JavaScript原生的方法 window.onload 之间的差异
window.onload |
$(function(){}) |
|
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（图片、flash、视频等）才能执行。 | 网页中所有 DOM 文档结构绘制完毕后即刻执行，可能与 DOM 元素关联的内容（图片、flash、视频等）并没有加载完。 |
| 编写个数 | 同一页面不能同时编写多个。 | 同一页面能同时编写多个。 |
Jquery对象
// html() 方法，等价于 document.getElementById("#userName").innerHTML;
var userName= $("#userName").html();
通过选择器 $("#userName") 选择了 id=“userName” 的 HTML 元素，返回的对象就是 jQuery 对象。
DOM 对象只能使用 DOM 对象的方法/属性，而 jQuery 对象只能使用 jQuery 对象的方法/属性。例如 DOM 对象可以使用 DOM 对象拥有的 innerHTML 属性，但不能使用 jQuery 对象拥有的 html() 方法。
DOM和Jquery对象之间转换
DOM对象和Jquery对象之间是可以互相转换的，jQuery 对象的本质是一个类似数组或集合的对象，而 DOM 对象的本质是一个普通的对象。
DOM对象 -> Jquery对象
将一个 DOM 对象用 $() 包裹起来，就可以转换成一个 jQuery 对象，即 $(DOM对象) 就是一个 jQuery 对象，如下：
// 获取一个 DOM 对象
var javaScriptObject = document.getElementById("userName");
// 通过 $() 将 DOM 对象转为 jQuery 对象
var $jQueryObject = $(javaScriptObject);
Jquery对象 -> DOM对象
// 获取 jQuery 对象
var $jqueryObject = $("#userName");
// 1、通过数组下标的方式，将 jQuery 对象转为 DOM 对象
var javaScriptObject = jqueryObject[0];
// 2、通过 get(index) 的方式，将 jQuery 对象转为 DOM 对象
var javaScriptObject = jqueryObject.get(0);
