当前位置：首页 > news >正文

零基础学习jQuery第三天

news 2025/8/12 7:12:15

一、动画效果：让页面 “活” 起来

1. 基础动画方法

2. 自定义动画：animate()

二、AJAX 异步请求：与后端交互

1. 基础语法

2. 常用简化方法

3. 实战案例：加载并显示数据

三、今日练习

四、小结

恭喜你进入 jQuery 学习的第三天！今天我们将学习两个非常实用的知识点：动画效果和AJAX 异步请求。这两个功能能让你的页面更具交互性，还能实现与后端的数据交互，是 jQuery 中非常强大的功能。

一、动画效果：让页面 “活” 起来

jQuery 提供了一系列简化的动画方法，无需复杂的 CSS 或 JS 就能实现平滑过渡效果。

1. 基础动画方法

show() / hide()：显示 / 隐藏元素（默认是瞬间效果，可加参数控制时长）

html

预览

<div id="box" style="width:100px;height:100px;background:red;"></div>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button><script>// 点击显示按钮，让盒子用500毫秒（0.5秒）慢慢显示$("#showBtn").click(function() {$("#box").show(500); // 数字单位是毫秒});// 点击隐藏按钮，让盒子用800毫秒慢慢消失$("#hideBtn").click(function() {$("#box").hide(800);});
</script>

toggle()：切换显示 / 隐藏状态（点击一次显示，再点一次隐藏）

javascript

// 点击按钮，切换盒子的显示/隐藏（带动画）
$("button").click(function() {$("#box").toggle(300);
});

fadeIn() / fadeOut()：淡入 / 淡出效果（透明度变化）

javascript

// 淡入（300毫秒）
$("#box").fadeIn(300);
// 淡出（500毫秒）
$("#box").fadeOut(500);

slideDown() / slideUp()：下拉 / 上滑效果（类似折叠面板）

javascript

// 下拉展开（常用于菜单展开）
$("#menu").slideDown(400);
// 上滑收起
$("#menu").slideUp(400);

2. 自定义动画：`animate()`

如果基础动画满足不了需求，可以用 animate() 自定义样式变化（如位置、大小等）：

html

预览

<div id="box" style="position:absolute; width:100px; height:100px; background:blue;"></div>
<button id="moveBtn">移动盒子</button><script>$("#moveBtn").click(function() {// 让盒子在1秒内移动到left:300px、top:200px，同时宽度变为200px$("#box").animate({left: "300px",top: "200px",width: "200px"}, 1000); // 1000毫秒 = 1秒});
</script>

注意：使用 animate() 时，元素需要设置 position: relative/absolute/fixed 才能改变 left/top 等位置属性。

二、AJAX 异步请求：与后端交互

AJAX 可以让页面在不刷新的情况下与服务器交换数据（比如加载数据、提交表单），jQuery 用 $.ajax() 简化了原生 JS 的复杂写法。

1. 基础语法

javascript

$.ajax({url: "请求的地址", // 后端接口地址（如 "data.json" 或 "/api/getUser"）type: "GET", // 请求方式：GET（获取数据）或 POST（提交数据）dataType: "json", // 预期返回的数据类型（json/text/html等）success: function(response) {// 请求成功时执行（response 是后端返回的数据）console.log("获取数据成功：", response);},error: function(xhr) {// 请求失败时执行（xhr 是错误信息）console.log("请求失败：", xhr.status);}
});

2. 常用简化方法

jQuery 为常用的请求类型提供了更简洁的写法：

$.get()：快速发送 GET 请求（获取数据）

javascript

// 向 "data.json" 发送 GET 请求，获取数据
$.get("data.json", function(data) {// 成功后处理数据（data 是返回的内容）console.log("GET 成功：", data);
});

$.post()：快速发送 POST 请求（提交数据）

javascript

// 向 "/api/submit" 提交数据（如表单信息）
$.post("/api/submit", {username: "张三",age: 20
}, function(response) {console.log("提交成功，后端返回：", response);
});

3. 实战案例：加载并显示数据

假设我们有一个 data.json 文件（模拟后端数据）：

json

{"name": "jQuery教程","content": "今天学习AJAX！","author": "小明"
}

用 jQuery 加载并显示到页面：

html

预览

<div id="info"></div>
<button id="loadBtn">加载数据</button><script>$("#loadBtn").click(function() {// 点击按钮后，用 GET 请求加载 data.json$.get("data.json", function(data) {// 把数据拼接成 HTML 显示到页面let html = `<h3>${data.name}</h3><p>${data.content}</p><p>作者：${data.author}</p>`;$("#info").html(html);}).error(function() {// 如果请求失败，显示错误信息$("#info").html("加载失败，请重试！");});});
</script>

三、今日练习

实现一个 “动画菜单”：
- 点击按钮，用 slideDown() 展开一个菜单列表（ul）
- 再点击一次，用 slideUp() 收起菜单
模拟数据加载：
- 创建一个 users.json 文件，包含 3 个用户信息（name, age, email）
- 页面有一个 “加载用户” 按钮，点击后用 $.get() 请求该文件
- 成功后，将用户信息显示在页面的表格中