零基础学习jQuery第四天

<div id="productList"></div>

<script>
// 模拟后端返回的商品数据
const products = [
  { id: 1, name: "笔记本电脑", price: 5999 },
  { id: 2, name: "机械键盘", price: 299 },
  { id: 3, name: "无线鼠标", price: 129 }
];

// 构建 HTML 字符串（批量生成）
let html = '<ul class="product-ul">';
products.forEach(product => {
  // 拼接单个商品的 HTML
  html += `
    <li data-id="${product.id}" class="product-item">
      <h3>${product.name}</h3>
      <p>价格：${product.price}元</p>
      <button class="add-cart">加入购物车</button>
    </li>
  `;
});
html += '</ul>';

// 一次性插入到页面（比多次 append 高效）
$("#productList").html(html);
</script>

2. 元素属性与样式的批量操作

属性操作：使用 attr() 批量设置属性，data() 操作自定义数据（data-* 属性）。
样式操作：使用 css() 批量设置样式，结合 addClass()/removeClass() 控制类。

javascript

// 批量设置属性
$(".product-item:first").attr({
  "title": "热卖商品",
  "data-type": "electronics"
});

// 读取自定义数据（对应 data-id、data-type）
const firstId = $(".product-item:first").data("id"); // 1
const firstType = $(".product-item:first").data("type"); // "electronics"

// 批量设置样式
$(".add-cart").css({
  "background-color": "#007bff",
  "color": "white",
  "padding": "5px 10px",
  "border": "none",
  "cursor": "pointer"
});

// 点击按钮时切换样式类
$(".add-cart").click(function() {
  $(this).toggleClass("active"); // 切换 active 类（可在 CSS 中定义活跃状态）
});

二、事件处理深化：委托与高级绑定

之前学了 click() 等简单事件，但面对 动态生成的元素 或 需要统一管理的事件，需要掌握事件委托和命名空间。

1. 事件委托（解决动态元素事件绑定问题）

动态生成的元素（如上面案例中的商品按钮）直接用 click() 绑定事件会失效，因为元素创建时事件还未绑定。此时需要用 事件委托：将事件绑定到父元素，由父元素代理触发。

案例：给动态生成的 “加入购物车” 按钮绑定点击事件

javascript

// 事件委托：将事件绑定到父元素 #productList
$("#productList").on("click", ".add-cart", function() {
  // $(this) 指向被点击的 .add-cart 按钮
  const productItem = $(this).closest(".product-item"); // 找到父级商品元素
  const productId = productItem.data("id");
  const productName = productItem.find("h3").text();
  
  alert(`已将【${productName}】加入购物车，ID：${productId}`);
});

原理：事件冒泡到父元素，父元素根据选择器（.add-cart）判断是否触发事件。
优势：无需为每个动态元素单独绑定，性能更优。

2. 事件命名空间（方便管理和移除事件）

当一个元素绑定多个同类型事件（如多个 click），可以用命名空间区分，便于单独移除。

javascript

// 绑定带命名空间的事件
$(".add-cart").on("click.add", function() {
  console.log("添加到购物车");
});

$(".add-cart").on("click.log", function() {
  console.log("记录操作日志");
});

// 只移除 "add" 命名空间的 click 事件
$(".add-cart").off("click.add");
// 移除所有 click 事件（不带命名空间）
// $(".add-cart").off("click");

3. 阻止事件冒泡与默认行为

event.stopPropagation()：阻止事件冒泡（父元素不会再触发该事件）。
event.preventDefault()：阻止元素默认行为（如链接跳转、表单提交）。
简写：return false（同时阻止冒泡和默认行为，仅限 jQuery 事件处理中）。

javascript

// 阻止链接跳转（默认行为）
$("a.prevent").click(function(event) {
  event.preventDefault(); // 等价于 return false;
  console.log("链接被点击，但不跳转");
});

// 阻止事件冒泡
$(".child").click(function(event) {
  event.stopPropagation(); // 父元素的 click 事件不会触发
  console.log("子元素被点击");
});

$(".parent").click(function() {
  console.log("父元素被点击"); // 若子元素触发，且未阻止冒泡，这里会执行
});

三、综合案例：动态 Todo 列表

结合今天的知识，实现一个可添加、删除、标记完成的 Todo 列表。

html

预览

<div class="todo-app">
  <input type="text" id="todoInput" placeholder="输入待办事项...">
  <button id="addTodo">添加</button>
  <ul id="todoList"></ul>
</div>

<style>
  .todo-item { padding: 8px; margin: 5px 0; border: 1px solid #eee; }
  .todo-item.done { text-decoration: line-through; color: #999; }
  .delete { margin-left: 10px; color: red; cursor: pointer; }
</style>

<script>
// 初始化待办列表
let todos = [
  { id: 1, content: "学习 jQuery", done: false }
];

// 渲染列表
function renderTodos() {
  let html = "";
  todos.forEach(todo => {
    html += `
      <li class="todo-item ${todo.done ? 'done' : ''}" data-id="${todo.id}">
        <span class="content">${todo.content}</span>
        <span class="delete">删除</span>
      </li>
    `;
  });
  $("#todoList").html(html);
}

// 初始渲染
renderTodos();

// 添加待办
$("#addTodo").click(function() {
  const content = $("#todoInput").val().trim();
  if (!content) return;
  
  // 添加新待办
  todos.push({
    id: Date.now(), // 用时间戳作为唯一 ID
    content: content,
    done: false
  });
  
  // 重新渲染
  renderTodos();
  // 清空输入框
  $("#todoInput").val("");
});

// 事件委托：标记完成/未完成（点击内容）
$("#todoList").on("click", ".content", function() {
  const id = $(this).parent().data("id");
  // 找到对应 todo 并切换 done 状态
  todos = todos.map(todo => 
    todo.id === id ? { ...todo, done: !todo.done } : todo
  );
  renderTodos();
});

// 事件委托：删除待办（点击删除按钮）
$("#todoList").on("click", ".delete", function(event) {
  event.stopPropagation(); // 阻止冒泡（避免触发上面的 .content 点击事件）
  const id = $(this).parent().data("id");
  todos = todos.filter(todo => todo.id !== id); // 过滤掉要删除的项
  renderTodos();
});
</script>

今日总结

DOM 操作：通过拼接 HTML 字符串高效创建动态元素，用 attr()、data()、css() 批量操作属性和样式。
事件处理：
- 事件委托（on() 的事件委托写法）解决动态元素绑定问题。
- 事件命名空间方便管理多个同类型事件。
- 阻止冒泡（stopPropagation()）和默认行为（preventDefault()）。
综合案例中，我们结合了动态渲染、事件委托和数据操作，模拟了真实项目中的常见场景。

明天我们会学习 jQuery 的动画效果和插件使用，让页面交互更生动～