jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在jQuery中，我们可以使用.css()方法来增加样式，本文将详细介绍如何使用jQuery增加样式。
1、设置内联样式
要使用jQuery设置内联样式，可以使用.css()方法，该方法接受两个参数：第一个参数是要设置的CSS属性，第二个参数是要设置的属性值，要将id为"myDiv"的元素的背景颜色设置为红色，可以使用以下代码：
$("#myDiv").css("background-color", "red");
2、设置多个样式
要使用jQuery设置多个样式，可以在.css()方法中传递一个包含多个键值对的对象，要将id为"myDiv"的元素的背景颜色设置为红色，字体大小设置为16像素，可以使用以下代码：
$("#myDiv").css({
"background-color": "red",
"font-size": "16px"
});
3、动态增加样式
要使用jQuery动态增加样式，可以使用.css()方法，要根据用户输入的值动态设置id为"myDiv"的元素的背景颜色，可以使用以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery动态增加样式示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="colorInput" placeholder="请输入颜色">
<button id="applyColorBtn">应用颜色</button>
<div id="myDiv">这是一个示例div。</div>
<script>
$("#applyColorBtn").click(function() {
var color = $("#colorInput").val();
$("#myDiv").css("background-color", color);
});
</script>
</body>
</html>
在这个示例中，当用户点击"应用颜色"按钮时，会触发#applyColorBtn元素的点击事件，事件处理函数会获取用户输入的颜色值，并使用.css()方法将其设置为id为"myDiv"的元素的背景颜色。
4、移除样式
要使用jQuery移除样式，可以使用.removeAttr()方法，要移除id为"myDiv"的元素的背景颜色，可以使用以下代码：
$("#myDiv").removeAttr("style");
5、切换样式类
要使用jQuery切换样式类，可以使用.toggleClass()方法，要切换id为"myDiv"的元素的"active"和"inactive"样式类，可以使用以下代码：
$("#myDiv").toggleClass("active inactive");
6、添加新的样式类并设置样式
要使用jQuery添加新的样式类并设置样式，可以先使用addClass()方法添加新的样式类，然后使用.css()方法设置样式，要将id为"myDiv"的元素的背景颜色设置为蓝色，并将其添加到名为"blueBox"的样式类中，可以使用以下代码：
$("#myDiv").addClass("blueBox").css("background-color", "blue");
7、根据选择器添加样式类并设置样式
要使用jQuery根据选择器添加样式类并设置样式，可以使用addClass()方法和选择器结合，要将所有具有特定类名的元素的背景颜色设置为蓝色，并将其添加到名为"blueBox"的样式类中，可以使用以下代码：
$(".specificClass").addClass("blueBox").css("background-color", "blue");
jQuery提供了多种方法来增加样式，包括设置内联样式、设置多个样式、动态增加样式、移除样式、切换样式类、添加新的样式类并设置样式以及根据选择器添加样式类并设置样式，这些方法可以帮助我们轻松地操作HTML元素的样式。