1. HTML 结构: 模拟淘宝首页的头部、导航、商品列表和页脚。
  2. CSS 样式: 让页面看起来更像一个电商网站。
  3. jQuery 交互: 实现购物车商品数量增减、商品加入购物车、总价计算等动态效果。

最终效果预览

第一步：HTML 代码 (index.html)

这是页面的骨架,包含了商品列表、购物车区域和必要的脚本引用。

jquery制作简单淘宝网页代码
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简易淘宝 - jQuery版</title>
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header class="main-header">
        <div class="container">
            <h1>简易淘宝</h1>
            <!-- 购物车 -->
            <div class="cart">
                <span>购物车</span>
                <span class="cart-count">0</span>
                <span>件商品</span>
            </div>
        </div>
    </header>
    <main class="container">
        <h2>商品列表</h2>
        <div class="product-list">
            <!-- 商品1 -->
            <div class="product-item" data-id="1" data-price="99.00">
                <img src="https://via.placeholder.com/200x200?text=商品1" alt="商品图片">
                <h3>苹果 iPhone 15 Pro</h3>
                <p class="price">¥ <span>99.00</span></p>
                <div class="quantity-control">
                    <button class="decrease">-</button>
                    <input type="text" value="1" readonly>
                    <button class="increase">+</button>
                </div>
                <button class="add-to-cart">加入购物车</button>
            </div>
            <!-- 商品2 -->
            <div class="product-item" data-id="2" data-price="159.00">
                <img src="https://via.placeholder.com/200x200?text=商品2" alt="商品图片">
                <h3>华为 MateBook X Pro</h3>
                <p class="price">¥ <span>159.00</span></p>
                <div class="quantity-control">
                    <button class="decrease">-</button>
                    <input type="text" value="1" readonly>
                    <button class="increase">+</button>
                </div>
                <button class="add-to-cart">加入购物车</button>
            </div>
            <!-- 商品3 -->
            <div class="product-item" data-id="3" data-price="299.00">
                <img src="https://via.placeholder.com/200x200?text=商品3" alt="商品图片">
                <h3>索尼 WH-1000XM5 耳机</h3>
                <p class="price">¥ <span>299.00</span></p>
                <div class="quantity-control">
                    <button class="decrease">-</button>
                    <input type="text" value="1" readonly>
                    <button class="increase">+</button>
                </div>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
        <!-- 购物车详情 -->
        <div class="cart-details">
            <h3>购物车详情</h3>
            <div class="cart-items">
                <!-- 购物车商品将通过JS动态添加到这里 -->
            </div>
            <div class="cart-total">
                <strong>总计: ¥ <span class="total-price">0.00</span></strong>
            </div>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="main-footer">
        <p>&copy; 2025 简易淘宝. All rights reserved.</p>
    </footer>
    <!-- 引入自定义JS -->
    <script src="script.js"></script>
</body>
</html>

第二步：CSS 代码 (style.css)

这是页面的样式,让布局和元素看起来更美观。

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    color: #333;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
/* 头部样式 */
.main-header {
    background-color: #ff6700;
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-header h1 {
    margin: 0;
    font-size: 24px;
}
.cart {
    font-size: 16px;
    cursor: pointer;
}
.cart-count {
    font-weight: bold;
    margin: 0 5px;
}
/* 商品列表样式 */
.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.product-item {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: calc(33.333% - 20px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.2s;
}
.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-item img {
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}
.product-item h3 {
    margin: 15px 0 10px;
    font-size: 18px;
}
.price {
    font-size: 20px;
    color: #ff6700;
    font-weight: bold;
    margin-bottom: 15px;
}
/* 数量控制样式 */
.quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.quantity-control button {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}
.quantity-control button:hover {
    background-color: #e0e0e0;
}
.quantity-control input {
    width: 50px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}
/* 加入购物车按钮 */
.add-to-cart {
    width: 100%;
    padding: 10px;
    background-color: #ff6700;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.add-to-cart:hover {
    background-color: #e55a00;
}
/* 购物车详情样式 */
.cart-details {
    margin-top: 40px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.cart-items {
    margin-top: 15px;
}
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.cart-item:last-child {
    border-bottom: none;
}
.cart-item .item-name {
    flex-grow: 1;
}
.cart-item .item-quantity {
    margin: 0 15px;
}
.cart-item .item-price {
    font-weight: bold;
    color: #ff6700;
}
.cart-total {
    margin-top: 20px;
    text-align: right;
    font-size: 18px;
}
/* 页脚样式 */
.main-footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    background-color: #333;
    color: white;
}

第三步：jQuery 代码 (script.js)

这是实现交互效果的核心,我们在这里处理所有动态逻辑。

$(document).ready(function() {
    // 购物车数据
    let cart = [];
    // --- 1. 商品数量增减 ---
    $('.increase').on('click', function() {
        let $input = $(this).siblings('input');
        $input.val(parseInt($input.val()) + 1);
    });
    $('.decrease').on('click', function() {
        let $input = $(this).siblings('input');
        let currentValue = parseInt($input.val());
        if (currentValue > 1) {
            $input.val(currentValue - 1);
        }
    });
    // --- 2. 加入购物车 ---
    $('.add-to-cart').on('click', function() {
        let $productItem = $(this).closest('.product-item');
        // 获取商品信息
        let productId = $productItem.data('id');
        let productName = $productItem.find('h3').text();
        let productPrice = parseFloat($productItem.data('price'));
        let quantity = parseInt($productItem.find('input').val());
        // 检查商品是否已在购物车中
        let existingItem = cart.find(item => item.id === productId);
        if (existingItem) {
            // 如果已存在，更新数量
            existingItem.quantity += quantity;
        } else {
            // 如果不存在，添加新商品
            cart.push({
                id: productId,
                name: productName,
                price: productPrice,
                quantity: quantity
            });
        }
        // 更新购物车显示
        updateCartDisplay();
        // 显示提示信息
        alert(`成功将 ${productName} x${quantity} 加入购物车！`);
    });
    // --- 3. 更新购物车显示 ---
    function updateCartDisplay() {
        let $cartItems = $('.cart-items');
        let $cartCount = $('.cart-count');
        let $totalPrice = $('.total-price');
        // 清空现有购物车列表
        $cartItems.empty();
        let totalItems = 0;
        let totalPrice = 0.00;
        // 遍历购物车数据并渲染
        cart.forEach(item => {
            totalItems += item.quantity;
            totalPrice += item.price * item.quantity;
            let $itemElement = $(`
                <div class="cart-item">
                    <span class="item-name">${item.name}</span>
                    <span class="item-quantity">x ${item.quantity}</span>
                    <span class="item-price">¥ ${(item.price * item.quantity).toFixed(2)}</span>
                </div>
            `);
            $cartItems.append($itemElement);
        });
        // 更新购物车图标数量和总价
        $cartCount.text(totalItems);
        $totalPrice.text(totalPrice.toFixed(2));
    }
});

如何运行

  1. 创建文件: 创建三个文件：index.html、style.css 和 script.js，并将上面的代码分别复制进去。
  2. 放置文件: 将这三个文件放在同一个文件夹中。
  3. 打开浏览器: 直接用浏览器（如 Chrome, Firefox）打开 index.html 文件。

你就有了一个功能齐全的、使用 jQuery 制作的简易淘宝网页了！你可以尝试增减商品数量、将商品加入购物车，并观察购物车详情和总价的实时变化。

jquery制作简单淘宝网页代码
（图片来源网络，侵删）