jQuery是一種常用的JavaScript框架，它能夠幫助開發者更方便地操作HTML元素、處理事件和執行動畫等任務。在jQuery中，我們可以通過選擇器選中指定的元素，并在JavaScript代碼中進行操作。而通過添加變量，我們能夠輕松地將復雜的代碼進行優化，提高開發效率。

// 通過變量選中指定元素
var elementId = "my-element";
var $myElement = $("#" + elementId);
// 通過變量設置元素屬性
var attrName = "src";
var attrValue = "image.jpg";
$myElement.attr(attrName, attrValue);
// 通過變量設置元素樣式
var styleName = "color";
var styleValue = "red";
$myElement.css(styleName, styleValue);

通過添加變量，我們可以更直觀地描述代碼操作的對象。同時，也能夠方便地重復調用這些操作，讓代碼更加模塊化和可維護。

除此之外，在HTML中使用data-*屬性，也能夠方便地在JavaScript代碼中獲取和設置元素的數據。下面是一個使用data-*屬性和變量的例子：

// HTML中
<div id="my-element" data-price="100"></div>
// JavaScript中
var elementId = "my-element";
var dataName = "price";
var price = $("#" + elementId).data(dataName);
console.log(price); // 輸出100
var newPrice = price + 50;
$("#" + elementId).data(dataName, newPrice);
console.log($("#" + elementId).data(dataName)); // 輸出150

可以看到，通過使用data-*屬性和變量，我們能夠更加方便地獲取和修改元素的數據，讓代碼的邏輯更加明確和簡單。