HTML data-屬性和jQuery是一種強大的組合，可用于在網頁中動態地顯示數據。HTML data-屬性可以在HTML標記中存儲數據，并且這些數據可以隨時在jQuery中使用。這種技術非常有用，因為它允許開發人員將數據嵌入到網頁中，而不必在JavaScript中硬編碼數據。 要使用HTML data-屬性，可以在HTML標記中使用"data-"前綴。例如，以下代碼片段演示了如何在一個div元素中定義一個data-屬性，并且將其值設置為100：

<div id="myDiv" data-mydata="100"></div>

在jQuery中，可以使用"data"方法來訪問這個data-屬性。以下代碼片段演示了如何使用jQuery來獲取一個元素的data-屬性并將其值打印到控制臺中：

var myData = $("#myDiv").data("mydata");
console.log(myData); // 輸出100

無論是在HTML data-屬性中存儲數字、字符串、數組還是對象，都可以使用這種方法輕松地訪問它們。以下代碼演示了如何在一個按鈕元素中定義一個data-屬性，并且將其值設置為一個對象：

<button id="myButton" data-mydata='{ "name": "John", "age": 30 }'>Click me</button>

現在可以使用jQuery獲取并使用這個對象。以下代碼片段演示了如何使用jQuery來獲取這個按鈕元素的data-屬性并使用其中的數據：

var myData = $("#myButton").data("mydata");
console.log(myData.name); // 輸出John
console.log(myData.age); // 輸出30

總之，使用HTML data-屬性和jQuery可以輕松地在網頁中嵌入和動態地顯示數據，這是一個非常有用的技術。我們可以使用data-屬性來存儲各種類型的數據，并在jQuery中輕松訪問它們。