---

一、前言

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互，使 JavaScript 开发更加高效。jQuery 兼容各种浏览器，极大地提高了前端开发的便捷性。

---

二、jQuery 简介

1. 什么是 jQuery？

jQuery 是一个轻量级的 JavaScript 库，它的核心特点如下：

• 简化 DOM 操作：使用简洁的选择器和方法操作 HTML 元素。
• 事件处理：提供便捷的方法绑定和管理事件。
• 动画效果：支持多种动画效果，增强用户体验。
• Ajax 支持：简化与服务器的数据交互。
• 插件机制：拥有大量可扩展的插件，提高开发效率。

2. jQuery 发展历史

jQuery 由 John Resig 于 2006 年发布，目前已成为最流行的 JavaScript 库之一。

---

三、jQuery 的使用

1. 引入 jQuery

方式 1：使用 CDN

推荐使用 CDN 方式加载 jQuery，避免重复下载，提高加载速度。

<!-- 最新版本 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

方式 2：本地引入

可以将 jQuery 文件下载到项目目录，然后使用 <script> 引入：

<script src="js/jquery.min.js"></script>

---

2. jQuery 语法基础

1. 语法结构

javascript">$(selector).action();

• $：表示 jQuery 对象。
• selector：用于选择 HTML 元素（如 #id、.class、element 等）。
• action()：对选中的元素执行的操作（如 hide()、css() 等）。

示例：让 div 元素隐藏

javascript">$(document).ready(function() {$("#myDiv").hide();
});

---

3. jQuery 选择器

jQuery 提供了丰富的选择器，帮助开发者轻松操作 DOM 元素。

选择器	描述	示例
*	选中所有元素	$(" * ")
#id	选中 id 为 id 的元素	$("#myId")
.class	选中 class 为 class 的所有元素	$(".myClass")
element	选中指定标签名的所有元素	$("p")
parent child	选中某个父元素下的子元素	$("ul li")
:first	选中第一个元素	$("p:first")
:last	选中最后一个元素	$("p:last")

示例：改变所有 p 标签的字体颜色

javascript">$("p").css("color", "red");

---

4. jQuery 事件处理

jQuery 提供了多种事件绑定方法，例如 click()、hover()、focus() 等。

1. 点击事件 (click())

javascript">$("#btn").click(function() {alert("按钮被点击！");
});

2. 鼠标悬停 (hover())

javascript">$("#box").hover(function() { $(this).css("background", "yellow"); },  function() { $(this).css("background", "white"); }
);

3. 键盘事件 (keydown())

javascript">$(document).keydown(function(event) {console.log("按下的键：" + event.key);
});

---

5. jQuery DOM 操作

1. 获取和修改 HTML 内容

• 获取内容：html()、text()、val()
• 修改内容：html(value)、text(value)、val(value)

javascript">// 获取 HTML 内容
let content = $("#myDiv").html();
console.log(content);// 修改 HTML 内容
$("#myDiv").html("<b>新内容</b>");

2. 操作 CSS 样式

javascript">// 修改样式
$("#box").css("color", "blue");// 添加多个样式
$("#box").css({"background": "yellow","font-size": "20px"
});

3. 添加和删除元素

javascript">// 追加元素
$("ul").append("<li>新项</li>");// 在前面插入元素
$("ul").prepend("<li>前置项</li>");// 删除元素
$("#box").remove();

---

6. jQuery 动画效果

jQuery 提供了多种动画效果，如 hide()、show()、fadeIn()、fadeOut()、slideUp() 等。

1. 显示和隐藏

javascript">$("#btnHide").click(function() {$("#myDiv").hide();
});$("#btnShow").click(function() {$("#myDiv").show();
});

2. 淡入淡出

javascript">$("#fadeInBtn").click(function() {$("#box").fadeIn();
});$("#fadeOutBtn").click(function() {$("#box").fadeOut();
});

3. 滑动效果

javascript">$("#slideUpBtn").click(function() {$("#content").slideUp();
});$("#slideDownBtn").click(function() {$("#content").slideDown();
});

---

7. jQuery Ajax

jQuery 的 $.ajax()、$.get() 和 $.post() 方法简化了与服务器的交互。

1. GET 请求

javascript">$.get("data.json", function(data) {console.log("数据加载成功", data);
});

2. POST 请求

javascript">$.post("submit.php", { name: "张三", age: 25 }, function(response) {console.log("服务器响应：" + response);
});