jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 AJAX 交互等操作，通过 jQuery，我们可以方便地改变 HTML 元素的 CSS 样式，以下是如何使用 jQuery 改变 CSS 样式的详细教程。

1、引入 jQuery 库

在使用 jQuery 之前，首先需要引入 jQuery 库，可以通过以下方式引入：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、CSS 选择器

在 jQuery 中，我们使用 CSS 选择器来选取 HTML 元素，可以使用类选择器（.class）、ID 选择器（#id）、标签选择器（tag）等。

3、改变单个元素的样式

要改变单个元素的样式，可以使用 css() 方法，要将一个具有特定类名的元素的背景颜色更改为红色，可以这样做：

$(".className").css("backgroundcolor", "red");

4、改变多个元素的样式

如果要改变多个元素的样式，可以使用 css() 方法的回调函数，要将具有特定类名的所有元素的背景颜色更改为红色，可以这样做：

$(".className").css("backgroundcolor", function(index, value) {
    return "red";
});

5、改变单个元素的多个样式

要改变单个元素的多个样式，可以使用 css() 方法传递一个包含属性和值的对象，要将一个具有特定 ID 的元素的背景颜色更改为红色，字体大小更改为 20px，可以这样做：

$("#id").css({
    "backgroundcolor": "red",
    "fontsize": "20px"
});

6、改变多个元素的多个样式

要改变多个元素的多个样式，可以使用 css() 方法传递一个包含属性和值的对象的数组，要将具有特定类名的所有元素的背景颜色更改为红色，字体大小更改为 20px，可以这样做：

$(".className").css({
    "backgroundcolor": "red",
    "fontsize": "20px"
});

7、添加新的 CSS 类

要给一个或多个元素添加新的 CSS 类，可以使用 addClass() 方法，要给一个具有特定 ID 的元素添加名为 "newClass" 的新类，可以这样做：

$("#id").addClass("newClass");

8、移除 CSS 类

要从一个或多个元素中移除 CSS 类，可以使用 removeClass() 方法，要从具有特定 ID 的元素中移除名为 "oldClass" 的类，可以这样做：

$("#id").removeClass("oldClass");

9、切换 CSS 类

要切换一个或多个元素的 CSS 类，可以使用 toggleClass() 方法，如果元素已经具有该类，则移除它；否则，添加它，要切换具有特定 ID 的元素的名为 "toggleClass" 的类的启用/禁用状态，可以这样做：

$("#id").toggleClass("toggleClass");

10、使用动画效果改变样式

jQuery UI 库提供了许多预定义的动画效果，可以轻松地在元素上应用这些效果，要将一个具有特定 ID 的元素的背景颜色从红色变为蓝色，并使用渐变动画效果，可以这样做：

$("#id").animate({
    "backgroundcolor": "blue"
}, "slow");

通过以上示例，我们可以看到如何使用 jQuery 轻松地改变 HTML 元素的 CSS 样式，无论是单个元素还是多个元素，无论是单个样式还是多个样式，都可以通过相应的方法来实现，还可以使用动画效果让样式变化更加生动有趣，希望这些示例能帮助你更好地理解和使用 jQuery。