jquery切换css样式

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。使用 jQuery 切换 CSS 样式是一种常见的操作，可以动态地改变页面元素的样式。

基础概念

在 jQuery 中，可以使用 .css() 方法来获取或设置元素的样式属性。要切换样式，通常会结合使用 .addClass() 和 .removeClass() 方法，或者使用 .toggleClass() 方法。

类型与应用场景

类型：jQuery 样式切换主要涉及类样式的添加、移除和切换。
应用场景：
- 响应用户交互，如点击按钮改变元素样式。
- 根据不同的条件展示不同的视觉效果。
- 实现动画效果时伴随样式的变化。

示例代码

以下是一个使用 jQuery 切换 CSS 样式的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery CSS 切换示例</title>
<style>
  .highlight {
    background-color: yellow;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("highlight");
  });
});
</script>
</head>
<body>

<p>点击下面的按钮切换我的背景颜色。</p>
<button>切换样式</button>

</body>
</html>

在这个例子中，当按钮被点击时，<p> 元素会切换 highlight 类。如果 <p> 元素已经有 highlight 类，它会被移除；如果没有，它会被添加。