jQuery基本使用教程

步骤 1：引入jQuery库

首先，你需要将jQuery库引入到你的HTML文件中。你可以通过以下两种方式之一来完成：

下载并引入本地文件

访问 jQuery 官方网站。
点击页面上的 “Download” 按钮，选择你想要的版本（通常推荐使用最新版本）。
下载并将 jQuery 文件保存到你的项目文件夹中。
在你的 HTML 文件中使用 <script> 标签来引入 jQuery 文件。

<script src="path/to/jquery.js"></script>

使用 CDN 引入

CDN（内容分发网络）提供了一个托管在全球多个服务器上的公共库版本，可以直接引入到你的项目中。在 HTML 文件中使用以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤 2：使用 jQuery

一旦你将 jQuery 库引入到项目中，你就可以开始使用它了。

选择元素

jQuery使用类似于CSS选择器的语法来选择HTML元素。你可以使用 $ 或 jQuery 函数来选择元素并对其进行操作。

$(document).ready(function() {
  // 代码将在文档加载完毕后执行
  // 你的 jQuery 代码写在这里
});

操作元素

一旦你选择了一个或多个元素，你可以使用各种方法来操作它们。

// 改变元素的文本内容
$('#myElement').text('新的文本内容');

// 改变元素的HTML内容
$('#myElement').html('<strong>加粗的文本</strong>');

// 改变元素的样式
$('#myElement').css('color', 'red');

// 添加类名
$('#myElement').addClass('highlight');

// 移除类名
$('#myElement').removeClass('highlight');

// 监听事件
$('#myButton').click(function() {
  // 当按钮被点击时执行的代码
});

// 隐藏元素
$('#myElement').hide();

// 显示元素
$('#myElement').show();

处理事件

jQuery使得处理用户事件变得更加容易。你可以使用 on 方法来监听并响应事件。

$('#myButton').on('click', function() {
  // 当按钮被点击时执行的代码
});

$('#myForm').on('submit', function(event) {
  // 当表单提交时执行的代码
  event.preventDefault(); // 阻止表单默认提交行为
});

这只是jQuery的一小部分功能，但它可以帮助你入门。你可以查阅 jQuery 官方文档以获取更多详细信息和示例。