我们先来看个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加和删除类</title>
<style>
div{width: 500px;height: 500px;background: #1c94c4;}
button{width: 80px;height: 40px;margin: 10px;font-size: 30px;}
</style>
[removed][removed]
<scri
`jQuery.css()` 方法是 jQuery 库中的一个核心功能，它允许开发者动态地修改或获取 HTML 元素的 CSS 样式属性。这个方法是 jQuery 实现动态页面效果的关键，能够帮助开发者实现各种复杂的交互和视觉变化。
在实例中，我们看到一个简单的 HTML 页面，包含一个 `div` 元素和两个按钮，分别带有 `id` "add-btn" 和 "sub-btn"。页面还包含几个 `p` 元素。`jQuery` 脚本用于响应按钮点击事件，动态改变 `div` 的宽度。`$("#add-btn").on("click", function() {...})` 和 `$("#sub-btn").on("click", function() {...})` 分别在按钮点击时增加或减少 `div` 的宽度。这里使用了 `css()` 方法的链式操作，如 `$("div").css("width", "+=20")` 和 `$("div").css("width", "-=20")`，这些语法允许我们增加或减少当前宽度的值。
`jQuery.css()` 方法的基本语法有以下几种形式：
1. **获取单个样式值**：`css("propertyname")`，例如 `$("div").css("width")` 会返回 `div` 元素的宽度。
2. **设置单个样式值**：`css("propertyname", "value")`，例如 `$("p").css("background-color", "yellow")` 将所有 `p` 元素的背景颜色设置为黄色。
3. **设置多个样式值**：`css({ "propertyname": "value", ... })`，例如 `$("p").css({"background-color": "yellow", "font-size": "200%"})` 同时设置多个 CSS 属性。
此外，`jQuery.css()` 还可以接受一个函数作为第二个参数，该函数会为每个匹配的元素计算并返回一个新的 CSS 值。例如，在实例中，`$("p").css("backgroundColor", function(dap) {...})` 根据 `p` 元素的索引值决定背景颜色是红色还是蓝色。
`jQuery` 提供的 `css()` 方法不仅限于颜色和尺寸属性，它可以用来改变任何有效的 CSS 属性，如字体、边距、定位等。例如，如果要更改链接的字体大小和颜色，可以这样写：
```javascript
$("a").css({"color": "#123456", "font-size": "18px"});
```
当需要在鼠标悬停时改变样式时，可以使用 `hover()` 方法，它接受两个函数参数，分别处理鼠标进入和离开事件。例如，要改变悬停状态下链接的文本颜色：
```javascript
$("a").hover(
function() { $(this).css("color", "orange"); }, // 鼠标进入
function() { $(this).css("color", ""); } // 鼠标离开
);
```
总结来说，`jQuery.css()` 方法是 jQuery 中用于操作 CSS 样式的强大工具，可以方便地获取、设置或计算元素的样式属性，使得前端开发更加高效和灵活。结合其他 jQuery 方法如 `hover()`，可以轻松创建丰富的用户界面和动态效果。
