使用jQuery动态操作HTML和CSS

jQuery 曾经是前端开发中操作 DOM 和 CSS 的绝对主力，它极大地简化了这些操作。虽然现代开发中直接使用原生 JavaScript 越来越普遍，但理解 jQuery 仍然很有价值，特别是在维护老项目时。

下面我将详细介绍如何使用 jQuery 动态操作 HTML 和 CSS。

1. 引入 jQuery

首先，需要在 HTML 中引入 jQuery 库。通常通过 CDN 引入：

<!-- 引入 jQuery -->
<script src="/https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 核心：jQuery 选择器 ($())

jQuery 的核心是 $() 函数，它用于选择元素。它接受一个 CSS 选择器作为参数，并返回一个包含匹配元素的 jQuery 对象。

// 选择所有 <p> 元素
$('p');

// 选择 ID 为 'myDiv' 的元素
$('#myDiv');

// 选择 class 为 'active' 的所有元素
$('.active');

// 更复杂的选择器：选择 article 下的第一个 p 标签
$('article p:first');

3. 操作 HTML 内容

获取和设置内容