什么是jQuery？
jQuery 就是一个能更加便捷操控 DOM 的 JavaScript 工具库。
从2006年8月28日首发至今，jQuery 仍被大多数网站所使用，并且其中仍存在诸多值得我们去参考的设计风格，比如改变结果集、链式风格、方法重载、命名风格、重载、封包等。
jQuery 中方法返回的是一个 jQuery 对象，而不是选择器所指向的对象本身。
为了方便，jQuery 中用$来替代jQuery的变量名，即$() === jQuery()。
最新版 jQuery 引入链接：
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
选择器
标准格式$('selector')，selector与css的选择器使用一致：
$(document); // 选择整个文档对象
$("#myId"); // 选择ID为myId的元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性为first的input元素
jQuery中还有特有的表达式：
$("a:first"); // 选择网页中第一个a元素
$(":button"); // 选择所有类型为复选框的表单元素
$("tr:odd"); // 选择表格的奇数行，第一行为0，0视为偶数
$("tr:even"); // 选择表格的偶数行
$("div:visible"); // 选择所有可见的div元素
$("div:gt(2)"); // 选择所有div元素，除了前3个
其中，:visible仅对display: none有效，对visiblity: hidden和opacity: 0无效。
过滤器
筛选结果集
$("div").has("p"); // 选择包含p元素的div元素
$("div").not(".myClass"); // 选择class不等于myClass的div元素
$("div").filter(".myClass"); // 选择class等于myClass的div元素
$("div").first(); // 选择第1个div元素
$("div").eq(5); // 选择第6个div元素
其中，$.is()能判断结果集中是否满足指定选择器，如果满足则返回true。
在DOM树上移动
$("div").next("p"); // 选择div元素后面的第一个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("form"); // 选择离div最近的那个form父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div的同级元素
链式操作
jQuery中，通过将函数的return设置为一个jQuery对象，可以实现对jQuery结果的连续操作
$("div").find("h3").eq(2).html("Hello");
将它分解开来，可以这样理解：
$("div") // 找到所有div元素
.find("h3") // 选择其中的所有h3子代
.eq(2) // 找到第3个元素
.html("Hello"); // 为它的赋值"Hello"
jQuery提供的.end()方法，还可以使结果集回退一步：
$("div")
.find("h3")
.eq(2)
.html("Hello")
.end() // 退回到选中所有的h3元素的那一步
.eq(0) // 选中第一个h3元素
.html("World"); // 将它的内容改为World
元素操作
取值 | 赋值
在 jQuery 中，通过给函数传递不同的参数，可以实现在通过一个函数名来完成多种操作，这就是 JS 中方法的重载。
在 jQuery 中常用给函数传递不同数量的参数的方法，来完成取值和赋值的操作：
$("h1").html(); // html()没有参数，表示取出h1的值
$("h1").html("Hello"); // html()有参数Hello，表示对h1进行赋值
它的原理是在函数内部对arguments.length进行判断。
常见的取值和赋值函数如下：
.html()：取出或设置 html 内容，设置<p>hi</p>等 HTML 元素。.text()：取出或设置 text 内容。.attr()：取出或设置某个属性的值。.width()：取出或设置某个元素的宽度。.height()：取出或设置某个元素的高度。.val()：取出某个表单元素的值。
如果结果集包含多个元素，在赋值时，将会对其中的所有元素赋值；在取值时，则只会取出结果集中第一个元素的值（.text()例外，它会取出所有元素的 text 内容）。
移动
对于特定元素在网页中移动，来实现布局的这一需求，jQuery 中往往有两种实现方式：直接移动该元素、移动其他元素使该元素达到目标位置。
假定我们选中了一个 div 元素，需要把它移动到 p 元素后面。
第一种方法是使用.insertAfter()，把 div 元素移动 p 元素后面：
$("div").insertAfter($("p"));
第二种方法是使用.after()，把 p 元素加到 div 元素前面：
$("p").after($("div"));
两种方法最大的区别在于返回值不同：使用.insertAfter()，它的返回值为 div 元素；使用.after()，它的返回值为 p 元素。我们可以根据需要，选择到底使用哪一种方法。
这种模式的操作方法，一共有四对：
.insertAfter()和.after()：从后面插入兄弟元素。.insertBefore()和.before()：从前面插入兄弟元素。.appendTo()和.append()：从后面插入子元素。.prependTo()和.prepend()：从前面插入子元素。
复制 | 删除 | 创建
复制元素可以用.clone()，它会返回一个对象的深拷贝副本：
const copy = $("#test").clone();
删除对象有两种方法：.remove()、.detach()
两者的区别在于：.remove()不保留被删除元素的事件；.detach()保留，有利于重新插入文档时使用。
$("#test").remove();
$("#test").detach();
清空元素内容（但是不删除该元素）使用.empty()：
$("#test").empty()
创建元素和 DOM 操作比较类似，只需要把新元素传入 jQuery 的构造函数就行了：
$("<p>Hello</p>");
$("<li class='new'>new list item</li>");
$("ul").append("<li>list item</li>");
工具类
jQuery 中内置了一些与元素无关的工具方法，它们是一些定义在 jQuery() 上的方法，即 jQuery.method()。
而那些操作元素的方法，是定义在构造函数的 prototype 上的方法，即 jQuery.prototype.method()。
常用的工具方法如下：
$.trim()：去除字符串两端的空格。$.each()：遍历一个数组或对象。$.inArray()：返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。$.grep()：返回数组中符合某种标准的元素。$.extend()：将多个对象合并到第一个对象。$.makeArray()：将对象转化为数组。$.type()：判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。$.isArray()：判断某个参数是否为数组。$.isEmptyObject()：判断某个对象是否为空（不含有任何属性）。$.isFunction()：判断某个参数是否为函数。$.isPlainObject()：判断某个参数是否为用{}或new Object建立的对象。$.support()：判断浏览器是否支持某个特性。
