jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 操作。本教程将帮助你轻松入门 jQuery 2.1.3 版本，掌握其核心功能，并通过实例教程加深理解。
什么是 jQuery？
jQuery 是一种让 JavaScript 更简单、更快速和更有效率的库。它通过封装常用的 JavaScript 功能，提供了一套简洁的 API，使得开发者能够更加方便地操作 DOM（文档对象模型）、处理事件以及执行异步请求。
安装 jQuery
首先，你需要将 jQuery 库引入到你的 HTML 文件中。可以通过以下方式获取 jQuery：
- 官方网站下载：访问 jQuery 官方网站，下载适合你项目的 jQuery 版本。
- 使用 CDN（内容分发网络）：从 CDN 服务商获取 jQuery 链接，例如 Google、CDNJS 或 BootstrapCDN。
在 HTML 文件中，将以下代码添加到 <head> 部分：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
jQuery 2.1.3 核心功能
1. 选择器
jQuery 提供了丰富的选择器，可以轻松地选择页面上的元素。
- 基本选择器：如
$("#id")、$(".class")、$("div")等。 - 属性选择器：如
$("input[type='text']")。 - 布尔值选择器：如
(":even")、(":odd")。
2. DOM 操作
jQuery 允许你轻松地添加、删除或修改 DOM 元素。
- 添加元素：
$("div").append("<p>这是一个段落。</p>")。 - 删除元素：
$("p").remove()。 - 修改元素：
$("p").text("新的段落文本")。
3. 事件处理
jQuery 提供了一套简单的事件处理机制。
- 绑定事件：
$("#button").click(function() { alert("按钮被点击了！"); });。 - 触发事件：
$("#button").trigger("click")。
4. 动画
jQuery 支持丰富的动画效果。
- 淡入/淡出：
$("#div").fadeIn()、$("#div").fadeOut()。 - 滑动：
$("#div").slideToggle()。 - 移动：
$("#div").animate({ left: 100 }, "slow")。
5. Ajax
jQuery 提供了简单易用的 Ajax 方法。
- 发起 GET 请求：
$.get("data.txt", function(data) { alert(data); });。 - 发起 POST 请求：
$.post("data.txt", { key: "value" }, function(data) { alert(data); });。
实例教程
以下是一个简单的实例，演示了如何使用 jQuery 修改一个按钮的文本。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 实例教程</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btnChangeText").click(function() {
$(this).text("按钮已被点击！");
});
});
</script>
</head>
<body>
<button id="btnChangeText">点击我</button>
</body>
</html>
在这个例子中，当用户点击按钮时，按钮的文本会从 “点击我” 变为 “按钮已被点击！”。这只是一个简单的例子，jQuery 的功能远不止于此。
总结
通过本教程，你已初步了解了 jQuery 2.1.3 的核心功能。接下来，你可以通过实践和探索来深入学习 jQuery。随着你对 jQuery 的熟练掌握，你将能够更高效地开发出各种动态网站和应用程序。