文档

jQuery Hello World — DOM 操作与 AJAX

目标

展示 jQuery 最经典的特性：选择器、DOM 操作、事件绑定、AJAX 请求和动画效果。

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>jQuery Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
  <style>
    body {
      font-family: -apple-system, 'Microsoft YaHei', sans-serif;
      max-width: 560px; margin: 40px auto;
      padding: 0 16px; background: #f8fafc;
    }
    .card {
      background: white; border-radius: 12px;
      padding: 24px; box-shadow: 0 2px 16px rgba(0,0,0,0.06);
      margin-bottom: 16px;
    }
    button {
      padding: 10px 20px; border: none; border-radius: 8px;
      font-size: 0.95rem; cursor: pointer; margin: 4px;
      transition: 0.2s;
    }
    button:hover { opacity: 0.85; }
    .btn-primary { background: #3b82f6; color: white; }
    .btn-danger { background: #ef4444; color: white; }
    .btn-success { background: #10b981; color: white; }
    input[type="text"] {
      width: 100%; padding: 10px; border: 2px solid #e2e8f0;
      border-radius: 8px; font-size: 1rem; box-sizing: border-box;
    }
    .todo-item {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0; border-bottom: 1px solid #f1f5f9;
    }
    .done { text-decoration: line-through; color: #94a3b8; }
    .loading { text-align: center; color: #888; padding: 20px; }
    .result { background: #f0fdf4; padding: 12px; border-radius: 8px; margin-top: 12px; }
  </style>
</head>
<body>

<div class="card">
  <h1>📜 jQuery Demo</h1>
  <p style="color:#64748b;">经典 DOM 操作 & AJAX 示例</p>

  <!-- 待办列表 -->
  <h3>📋 待办事项</h3>
  <div style="display:flex;gap:8px;margin-bottom:12px;">
    <input type="text" id="todo-input" placeholder="添加新任务..." />
    <button class="btn-primary" id="add-todo">添加</button>
  </div>
  <div id="todo-list"></div>
</div>

<div class="card">
  <h3>🌐 AJAX 请求</h3>
  <button class="btn-success" id="fetch-posts">加载文章</button>
  <div id="posts-container"></div>
</div>

<div class="card">
  <h3>✨ jQuery 动画</h3>
  <button class="btn-primary" id="btn-animate">显示/隐藏说明</button>
  <p id="animate-text" style="display:none;">
    jQuery 让动画变得极其简单：<code>.fadeIn()</code>、
    <code>.slideDown()</code>、<code>.animate()</code>。
  </p>
</div>

<script>
  // ===== 入口：DOM 就绪后执行 =====
  $(function () {
    // ========== 1. 待办事项：DOM 操作 ==========
    const $input = $("#todo-input");
    const $list = $("#todo-list");

    function addTodo(text) {
      const $item = $(`
        <div class="todo-item">
          <span>${escapeHtml(text)}</span>
          <div>
            <button class="btn-success done-btn">✓</button>
            <button class="btn-danger del-btn">✕</button>
          </div>
        </div>
      `);

      // 标记完成（事件委托不需要，这是直接绑定）
      $item.find(".done-btn").on("click", function () {
        $item.find("span").toggleClass("done");
      });

      // 删除
      $item.find(".del-btn").on("click", function () {
        $item.fadeOut(300, function () { $(this).remove(); });
      });

      $list.append($item);
    }

    $("#add-todo").on("click", function () {
      const text = $input.val().trim();
      if (text) { addTodo(text); $input.val("").focus(); }
    });

    $input.on("keydown", function (e) {
      if (e.key === "Enter") { $("#add-todo").trigger("click"); }
    });

    // 初始数据
    addTodo("学 jQuery");
    addTodo("写代码");

    // ========== 2. AJAX 请求 ==========
    $("#fetch-posts").on("click", function () {
      const $btn = $(this);
      const $container = $("#posts-container");

      $btn.prop("disabled", true).text("加载中...");
      $container.html('<div class="loading">⏳ 加载中...</div>');

      // jQuery AJAX（支持 Promise）
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts",
        method: "GET",
        data: { _limit: 5 },
        dataType: "json",
        timeout: 5000,
      })
        .done(function (posts) {
          const html = posts
            .map(
              (p) => `
            <div class="todo-item">
              <strong>${escapeHtml(p.title)}</strong>
              <small style="color:#94a3b8">#${p.id}</small>
            </div>`
            )
            .join("");
          $container.html(`<div class="result">${html}</div>`);
        })
        .fail(function (jqXHR, textStatus) {
          $container.html(
            `<div style="color:red;">请求失败：${textStatus}</div>`
          );
        })
        .always(function () {
          $btn.prop("disabled", false).text("加载文章");
        });
    });

    // ========== 3. 动画 ==========
    $("#btn-animate").on("click", function () {
      const $text = $("#animate-text");
      if ($text.is(":visible")) {
        $text.slideUp(400);
        $(this).text("显示说明");
      } else {
        $text.slideDown(400);
        $(this).text("隐藏说明");
      }
    });
  });

  // XSS 防护小工具
  function escapeHtml(str) {
    return $("<span>").text(str).html();
  }
</script>

</body>
</html>

运行步骤

保存为 index.html
浏览器直接打开

预期输出

待办列表支持添加/完成/删除（带动画）
点击"加载文章"从 JSONPlaceholder API 拉取 5 篇文章
显示/隐藏说明面板有 slide 动画

信息

路径: /tech-stacks/jquery/examples/Hello World - DOM 操作与 AJAX.md
更新时间: 2026/5/31