在这个数字化时代，掌握前端技术对于提升网页互动性和用户体验至关重要。jQuery，作为一款流行的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画和Ajax操作等任务。本文将带您通过jQuery 2.1版本，轻松在线运行实例教程，让您快速上手。

一、环境准备

在开始之前，请确保您的电脑已安装以下工具：

  1. 文本编辑器：如Visual Studio Code、Sublime Text等。
  2. 浏览器：推荐使用Chrome或Firefox，以确保最佳兼容性。

二、下载jQuery 2.1

首先，您需要下载jQuery库。访问jQuery官网（https://jquery.com/），下载最新版本的jQuery。由于本文以jQuery 2.1为例，您可以选择该版本进行下载。

三、创建HTML文件

在文本编辑器中创建一个名为index.html的文件，并添加以下基本HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery实例教程</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <h1>欢迎来到jQuery世界</h1>
    <button id="clickMe">点击我</button>
    <script src="script.js"></script>
</body>
</html>

这段代码中，我们引入了jQuery库，并创建了一个简单的HTML页面，包含一个标题和一个按钮。

四、编写jQuery代码

在文本编辑器中创建一个名为script.js的文件，并添加以下jQuery代码：

$(document).ready(function() {
    $("#clickMe").click(function() {
        alert("恭喜！您已成功点击按钮！");
    });
});

这段代码中，我们使用jQuery的$(document).ready()函数确保DOM元素加载完成后执行代码。当用户点击按钮时，会弹出一个提示框，显示“恭喜！您已成功点击按钮！”

五、在线运行实例

  1. 保存文件：将index.html和script.js文件保存到同一目录下。
  2. 打开浏览器：在浏览器中输入文件的URL（例如：file:///C:/path/to/your/file/index.html），即可看到页面效果。

六、总结

通过以上步骤，您已经成功使用jQuery 2.1版本创建了一个简单的实例。在实际开发中，您可以利用jQuery实现更多复杂的功能，如动画、Ajax请求等。希望本文能帮助您快速入门jQuery，为您的网页开发之路添砖加瓦。