jQuery 入门教程：基本步骤及代码示例

jQuery 是一个轻量级的 JavaScript 库，它简化了 HTML 文档的遍历、操作、事件处理和动画等操作。以下步骤介绍了使用 jQuery 的基本流程，并提供了相应的代码示例。

首先，需要在 HTML 文档的 <head> 标签中引入 jQuery 库文件。可以使用以下代码从 CDN 引入 jQuery：

<head>
  <script src='https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js'></script>
</head>

所有 jQuery 代码都应该放在 $(document).ready() 函数中，该函数确保在 DOM 加载完成后执行代码。

$(document).ready(function() {
  // jQuery 代码
});

jQuery 使用选择器来选择 HTML 文档中的元素。例如，以下代码会隐藏所有 <p> 元素：

$(document).ready(function() {
  // 选择元素并操作
  $('p').hide(); // 隐藏所有 <p> 元素
});

jQuery 可以轻松地为元素添加事件处理程序。例如，以下代码会在点击按钮时切换所有 <p> 元素的显示和隐藏：

$(document).ready(function() {
  // 事件处理
  $('button').click(function() {
    $('p').toggle(); // 切换所有 <p> 元素的显示和隐藏
  });
});

jQuery 提供了丰富的动画效果，可以使用 animate() 方法来创建自定义动画，也可以使用预定义的动画效果，例如 fadeIn()、fadeOut() 和 slideDown() 等。例如，以下代码会以缓慢的速度切换所有 <p> 元素的显示和隐藏：

$(document).ready(function() {
  // 动画效果
  $('button').click(function() {
    $('p').toggle('slow'); // 切换所有 <p> 元素的显示和隐藏，并添加动画效果
  });
});

本教程仅介绍了 jQuery 的基本用法，更多高级用法和功能请参考 jQuery 官方文档。