零基础学习jQuery第三天

最新推荐文章于 2025-12-04 20:16:23 发布

原创

最新推荐文章于 2025-12-04 20:16:23 发布 · 733 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #jquery #前端

恭喜你进入 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()

最低0.47元/天解锁文章