jQuery和CSS變量在前端開發中扮演著重要角色。jQuery是一種流行的JavaScript庫，它可以幫助我們快速編寫復雜的客戶端JavaScript代碼。而CSS變量使得我們可以輕松地管理網站的樣式，而不必重復寫代碼。在本文中，我們將探討如何使用jQuery操作CSS變量。

//設置CSS變量
$('body').css('--primary-color', 'red');
//獲取CSS變量
var primaryColor = $('body').css('--primary-color');
//使用CSS變量
$('h1').css('color', 'var(--primary-color)');

在上面的代碼中，我們首先使用jQuery選擇器選擇了整個頁面的body元素，然后使用css()函數設置了一個叫做--primary-color的CSS變量，將其值設置為紅色。接下來，我們使用相同的選擇器來獲取我們剛剛設置的變量的值，并將其保存在一個變量中。最后，我們使用css()函數來獲取--primary-color的值，并將其作為另一個元素（h1）的顏色。

//修改CSS變量
$('body').css('--primary-color', 'blue');
//緩慢修改CSS變量
$('body').animate({ '--primary-color': 'blue' }, 1000);

在上面的代碼中，我們展示了如何修改CSS變量。使用相同的jQuery選擇器，我們將--primary-color的始值從紅色更改為藍色。我們還展示了如何緩慢修改它，使得變量值從原來的紅色過渡到新的藍色，這里的動畫時間為1秒。

總之，在前端開發中，CSS變量和jQuery是非常有用的工具。通過學習如何使用它們，可以輕松地管理你的網站的樣式和javascript代碼，從而更輕松地創建出色的網站。