jQuery 的复习指南

2025-10-15
Web开发
一、jQuery 概述与作用

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。
核心作用：
DOM 操作简化
事件处理统一
动画效果创建
Ajax 请求封装
跨浏览器兼容性处理
二、应用场景

DOM 操作 - 快速选择、修改页面元素
动态交互 - 实现各种用户交互效果
表单处理 - 验证、提交、数据获取
Ajax 应用 - 异步数据加载
响应式界面 - 创建动态响应式组件
三、实际问题演示

下面通过一个实际的购物车功能来展示 jQuery 的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 购物车示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }
        
        .content {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .products {
            flex: 3;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .cart-container {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            height: 180px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: #3498db;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .product-price {
            font-size: 1.5rem;
            color: #e74c3c;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .add-to-cart {
            width: 100%;
            padding: 10px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s;
        }
        
        .add-to-cart:hover {
            background: #2980b9;
        }
        
        .cart-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        
        .cart-items {
            margin-bottom: 20px;
            max-height: 400px;
            overflow-y: auto;
        }
        
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .item-name {
            flex: 2;
        }
        
        .item-quantity {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .quantity-btn {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: none;
            background: #3498db;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .remove-btn {
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 3px;
            padding: 5px 10px;
            cursor: pointer;
        }
        
        .cart-total {
            font-size: 1.3rem;
            font-weight: bold;
            text-align: right;
            margin-top: 20px;
            padding-top: 10px;
            border-top: 2px solid #eee;
        }
        
        .empty-cart {
            text-align: center;
            color: #7f8c8d;
            padding: 20px 0;
        }
        
        .checkout-btn {
            width: 100%;
            padding: 12px;
            background: #2ecc71;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1.1rem;
            cursor: pointer;
            margin-top: 20px;
            transition: background 0.3s;
        }
        
        .checkout-btn:hover {
            background: #27ae60;
        }
        
        .checkout-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            background: #2ecc71;
            color: white;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            display: none;
            z-index: 1000;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .products {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery 购物车示例</h1>
        
        <div class="content">
            <div class="products">
                
            </div>
            
            <div class="cart-container">
                <h2 class="cart-title">购物车</h2>
                <div class="cart-items">
                    <div class="empty-cart">购物车为空</div>
                </div>
                <div class="cart-total">总计: ¥0.00</div>
                <button class="checkout-btn" disabled>结算</button>
            </div>
        </div>
    </div>
    
    <div class="notification">商品已添加到购物车！</div>

    <script>
        // 产品数据
        const products = [
            { id: 1, name: "无线耳机", price: 299, icon: "🎧" },
            { id: 2, name: "智能手机", price: 3999, icon: "📱" },
            { id: 3, name: "平板电脑", price: 2599, icon: "📟" },
            { id: 4, name: "智能手表", price: 1299, icon: "⌚" },
            { id: 5, name: "蓝牙音箱", price: 399, icon: "🔊" },
            { id: 6, name: "笔记本电脑", price: 5999, icon: "💻" }
        ];
        
        // 购物车数据
        let cart = [];
        
        // 文档就绪后执行 - jQuery核心特性
        $(document).ready(function() {
            // 渲染产品列表
            renderProducts();
            
            // 更新购物车显示
            updateCartDisplay();
            
            // 绑定结算按钮事件
            $('.checkout-btn').on('click', function() {
                if (cart.length > 0) {
                    alert('感谢您的购买！总金额：¥' + calculateTotal().toFixed(2));
                    // 清空购物车
                    cart = [];
                    updateCartDisplay();
                }
            });
        });
        
        // 渲染产品列表
        function renderProducts() {
            const $productsContainer = $('.products');
            
            // 使用jQuery遍历产品数据并创建产品卡片
            $.each(products, function(index, product) {
                const $productCard = $('<div>').addClass('product-card');
                
                $productCard.html(`
                    <div class="product-image">${product.icon}</div>
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <div class="product-price">¥${product.price.toFixed(2)}</div>
                        <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
                    </div>
                `);
                
                // 添加到产品容器
                $productsContainer.append($productCard);
            });
            
            // 使用事件委托绑定添加购物车事件
            $('.products').on('click', '.add-to-cart', function() {
                const productId = parseInt($(this).data('id'));
                addToCart(productId);
                showNotification();
            });
        }
        
        // 添加商品到购物车
        function addToCart(productId) {
            const product = products.find(p => p.id === productId);
            
            if (product) {
                // 检查商品是否已在购物车中
                const existingItem = cart.find(item => item.id === productId);
                
                if (existingItem) {
                    existingItem.quantity++;
                } else {
                    cart.push({
                        id: product.id,
                        name: product.name,
                        price: product.price,
                        quantity: 1,
                        icon: product.icon
                    });
                }
                
                // 更新购物车显示
                updateCartDisplay();
            }
        }
        
        // 更新购物车显示
        function updateCartDisplay() {
            const $cartItems = $('.cart-items');
            const $cartTotal = $('.cart-total');
            const $checkoutBtn = $('.checkout-btn');
            const $emptyCart = $cartItems.find('.empty-cart');
            
            // 清空购物车显示
            $cartItems.find('.cart-item').remove();
            
            if (cart.length === 0) {
                // 显示购物车为空消息
                if ($emptyCart.length === 0) {
                    $cartItems.append('<div class="empty-cart">购物车为空</div>');
                } else {
                    $emptyCart.show();
                }
                $checkoutBtn.prop('disabled', true);
            } else {
                // 隐藏购物车为空消息
                $emptyCart.hide();
                
                // 添加购物车商品
                $.each(cart, function(index, item) {
                    const $cartItem = $('<div>').addClass('cart-item');
                    
                    $cartItem.html(`
                        <div class="item-name">
                            <span>${item.icon}</span> ${item.name}
                        </div>
                        <div class="item-quantity">
                            <button class="quantity-btn minus" data-id="${item.id}">-</button>
                            <span>${item.quantity}</span>
                            <button class="quantity-btn plus" data-id="${item.id}">+</button>
                        </div>
                        <div class="item-price">¥${(item.price * item.quantity).toFixed(2)}</div>
                        <button class="remove-btn" data-id="${item.id}">删除</button>
                    `);
                    
                    $cartItems.append($cartItem);
                });
                
                $checkoutBtn.prop('disabled', false);
            }
            
            // 更新总计
            const total = calculateTotal();
            $cartTotal.text(`总计: ¥${total.toFixed(2)}`);
            
            // 绑定购物车项目事件
            bindCartItemEvents();
        }
        
        // 绑定购物车项目事件
        function bindCartItemEvents() {
            // 减少数量
            $('.minus').on('click', function() {
                const productId = parseInt($(this).data('id'));
                const item = cart.find(item => item.id === productId);
                
                if (item && item.quantity > 1) {
                    item.quantity--;
                    updateCartDisplay();
                }
            });
            
            // 增加数量
            $('.plus').on('click', function() {
                const productId = parseInt($(this).data('id'));
                const item = cart.find(item => item.id === productId);
                
                if (item) {
                    item.quantity++;
                    updateCartDisplay();
                }
            });
            
            // 删除商品
            $('.remove-btn').on('click', function() {
                const productId = parseInt($(this).data('id'));
                cart = cart.filter(item => item.id !== productId);
                updateCartDisplay();
            });
        }
        
        // 计算购物车总价
        function calculateTotal() {
            let total = 0;
            $.each(cart, function(index, item) {
                total += item.price * item.quantity;
            });
            return total;
        }
        
        // 显示通知
        function showNotification() {
            const $notification = $('.notification');
            
            // 使用jQuery动画显示通知
            $notification.fadeIn(300);
            
            // 3秒后自动隐藏
            setTimeout(function() {
                $notification.fadeOut(300);
            }, 3000);
        }
    </script>
</body>
</html>
四、jQuery 核心优势总结

通过上面的购物车示例，我们可以看到 jQuery 的以下优势：
简洁的DOM操作 - 使用 $() 选择器快速获取元素
链式调用 - 方法可以连续调用，代码更简洁
事件处理 - 统一的事件绑定方法，兼容不同浏览器
动画效果 - 内置的动画方法如 fadeIn(), fadeOut()
Ajax支持 - 简化异步请求处理
跨浏览器兼容 - 自动处理浏览器差异
五、jQuery 在现代开发中的定位

虽然现代前端开发中，React、Vue 等框架更为流行，但 jQuery 仍然在以下场景中有其价值：
传统项目的维护和升级
简单的交互需求，不需要复杂状态管理
与其他库或框架的集成
快速原型开发
希望这个复习指南能帮助你更好地理解和应用 jQuery！