jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，jQuery的设计宗旨是“write less, do more”，即用更少的代码完成更多的功能，下面通过一些例子来介绍jQuery的基本用法。
1、引入jQuery库
在使用jQuery之前，需要先引入jQuery库，可以通过以下两种方式之一引入：
方式一：下载jQuery库并引入
可以从jQuery官网（https://jquery.com/）下载最新版本的jQuery库，然后将下载的文件放到项目的相应目录下，并在HTML文件中引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<!-- 引入jQuery库 -->
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
方式二：使用CDN引入
如果不想下载jQuery库，可以直接使用CDN（Content Delivery Network）引入，将以下代码添加到HTML文件的<head>标签内：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、选择器
jQuery使用选择器来选取HTML元素，然后对这些元素进行操作，常用的选择器有ID选择器、类选择器、标签选择器、属性选择器等。
// 选取id为myDiv的元素
var myDiv = $("#myDiv");
// 选取class为myClass的元素
var myClass = $(".myClass");
// 选取所有的p标签
var pTags = $("p");
// 选取href属性为https://www.example.com的元素
var exampleLink = $("a[href='https://www.example.com']");
3、事件处理
jQuery提供了丰富的事件处理方法，如click、mouseover、keydown等。
// 为所有按钮添加点击事件处理函数
$("button").click(function() {
alert("Button clicked!");
});
// 为所有链接添加鼠标悬停事件处理函数
$("a").hover(function() {
$(this).css("color", "red");
}, function() {
$(this).css("color", "black");
});
4、HTML操作
jQuery提供了一系列方法来操作HTML元素，如append、prepend、remove、empty等。
// 在id为myDiv的元素内部追加一段文本
$("#myDiv").append("<p>This is a paragraph.</p>");
// 在id为myDiv的元素内部插入一段文本，并返回插入后的文本长度
var length = $("#myDiv").prepend("Hello, ").length;
console.log(length); // 输出：11（包括空格和换行符）
// 移除id为myDiv的元素及其子元素
$("#myDiv").remove();
5、CSS操作
jQuery提供了一系列方法来操作元素的CSS样式，如addClass、removeClass、toggleClass、css等。
// 为id为myDiv的元素添加一个名为myClass的类名
$("#myDiv").addClass("myClass");
// 为id为myDiv的元素移除一个名为myClass的类名（如果存在）
$("#myDiv").removeClass("myClass");
// 为id为myDiv的元素切换一个名为myClass的类名（如果不存在则添加，如果存在则移除）
$("#myDiv").toggleClass("myClass");