jQuery 样式 - JavaScript

jQuery 是一款广泛使用的 JavaScript 库，其集成了很多样式相关的功能，如选择器、属性操作等，可以让开发者更加方便地操作 DOM 元素。下面将详细介绍 jQuery 中与样式相关的功能。

1. 操作 CSS 样式

通过 jQuery 可以很方便地修改元素的 CSS 样式，使用 css() 方法即可。该方法接受一个 CSS 样式名称或者一个包含多个样式的对象作为参数，可以用于设置或获取 DOM 元素的 CSS 样式。

// 获取元素的背景颜色
var bgColor = $("div").css("background-color");

// 设置元素的样式
$("div").css({
  "background-color": "red",
  "color": "white",
  "font-size": "24px"
});

2. 添加/删除 CSS 类

通过 addClass() 和 removeClass() 方法可以方便地添加或删除 DOM 元素的 CSS 类。

// 添加 CSS 类
$("div").addClass("highlight");

// 删除 CSS 类
$("div").removeClass("highlight");

3. 切换 CSS 类

通过 toggleClass() 方法可以方便地切换 CSS 类。

// 切换 CSS 类
$("div").toggleClass("highlight");

4. 遍历 DOM 元素

通过 jQuery 的选择器功能，我们可以非常方便地遍历 DOM 元素，对其中的每一个都进行样式设置。

// 遍历所有 p 元素，设置其背景颜色为红色
$("p").each(function() {
  $(this).css("background-color", "red");
});

5. 链式调用

jQuery 支持链式调用，可以方便地同时操作多个 DOM 元素。

// 链式调用
$("div")
  .addClass("highlight")
  .css("font-size", "24px")
  .each(function() {
    $(this).html("Hello World");
  });

以上就是 jQuery 样式相关的功能介绍，使用 jQuery 可以方便地操作 DOM 元素的样式，提高开发效率。