有了jQuery，讓我們來看看如何用它來創建一個簡單而靈活的購物車。我們可以使用jQuery的事件處理程序來捕獲用戶在網站上添加商品的行為。下面是一個簡單的示例：

$(function() {
$('.add-to-cart-btn').on('click', function() {
var item = $(this).data('item');
var price = $(this).data('price');
// Add item to cart
addToCart(item, price);
// Update cart
updateCart();
});
});
function addToCart(item, price) {
var cart = JSON.parse(localStorage.getItem('cart')) || {};
cart[item] = cart[item] ? cart[item] + 1 : 1;
localStorage.setItem('cart', JSON.stringify(cart));
}
function updateCart() {
var cart = JSON.parse(localStorage.getItem('cart')) || {};
var html = '';
for (var item in cart) {
html += '
' + item + ': ' + cart[item] + '
';
}
$('.cart-items').html(html);
}

在這個示例中，我們首先將所有的加入購物車按鈕綁定到一個事件處理程序上。當用戶單擊任何一個按鈕時，我們將從它的data屬性中檢索項目和價格，并調用addToCart函數來將該項目添加到購物車中。接下來，我們調用updateCart函數來計算并顯示購物車中的所有項目和數量。

對于addToCart函數，我們將通過localStorage API將購物車存在本地。我們使用JSON.parse和JSON.stringify來將購物車對象從字符串中序列化和反序列化。我們還使用短路運算符來檢查每個項目是否已經存在于購物車中，并遞增其數量。

最后，對于updateCart函數，我們檢索購物車數據并使用循環構造HTML字符串。我們將該字符串插入到DOM中，在頂部的購物車圖標旁邊更新購物車中的項目數量。

通過這個簡單示例，我們可以看到如何使用jQuery構建一個強大但靈活的購物車應用程序。我們可以擴展它來包含更多的功能，如刪除和更新項目，以及結算和存儲購物車歷史記錄等等。