jQuery購物網頁源代碼：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery購物網頁</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="cart"></div>
<ul id="product-list">
<li>
<img src="product1.jpg">
<h2>商品1</h2>
<p class="price">100元</p>
<button class="add-to-cart">加入購物車</button>
</li>
<li>
<img src="product2.jpg">
<h2>商品2</h2>
<p class="price">200元</p>
<button class="add-to-cart">加入購物車</button>
</li>
</ul>
<script>
$(document).ready(function() {
$('.add-to-cart').click(function() {
var product = $(this).parent();
var product_name = product.find('h2').text();
var product_price = product.find('.price').text();
$('#cart').append('<div><p>' + product_name + '</p><p>' + product_price + '</p></div>');
});
});
</script>
</body>
</html>以上代碼是一個簡單的jQuery購物網頁，實現了添加商品到購物車的功能。首先我們引入了jQuery庫，然后在頁面中添加了商品列表和一個空的購物車。每個商品都有圖片、商品名稱、價格和加入購物車的按鈕。當用戶點擊按鈕時，jQuery會捕捉到該事件，并找到該商品的名稱和價格，然后將它們添加到購物車中。這個過程中使用了父元素和子元素的查找，以及字符串的拼接。
下一篇css怎么更改父元素