在PHP中使用$.data函數可以幫助我們輕松地訪問和操作網頁中的數據。這是一個非常重要的功能，它可以讓我們輕松地向網站中增加、刪除、修改數據。下面我們將詳細介紹$.data函數的功能以及如何使用它。

$.data函數是jQuery中非常重要的一個函數，它可以讓我們方便地操作HTML頁面中的數據。在實際應用中，它有很多應用場景。比如說，在一個電商網站中，我們需要存儲每一個商品的ID，價格，名稱等信息。那么，我們可以使用$.data函數來存儲這些信息，讓它們變得方便且易于修改。具體的使用代碼如下：

<!-- 在HTML中存儲數據 -->
<div id="product" data-id="001" data-price="199" data-name="iPhone7">
<h3>iPhone7</h3>
<p>價格：<span>$199</span></p>
<p><a href="#" class="buy">購買</a></p>
</div>
<!-- 在JavaScript中讀取數據 -->
$(document).ready(function(){
var id = $('#product').data('id');
var price = $('#product').data('price');
var name = $('#product').data('name');
console.log('商品ID：' + id);
console.log('商品價格：' + price);
console.log('商品名稱：' + name);
});

通過上面的代碼，我們可以輕松地讀取HTML中存儲的數據了。$.data函數中的參數可以是任何我們想要存儲的數據，我們可以將它們存儲在HTML元素的data-*屬性中。當我們需要讀取它們時，只需要使用$.data函數就可以了。

在上面的例子中，我們只是簡單地存儲了一些數據，但是$.data函數還有更加有用的功能。我們可以使用$.data函數來存儲JavaScript對象。例如：

<div id="person" data-info='{ "name": "張三", "age": 25, "family": { "father": "李四", "mother": "王五" } }'>張三的信息</div>
$(document).ready(function(){
// 讀取數據
var info = $('#person').data('info');
// 訪問對象中的屬性
console.log('姓名：' + info.name);
console.log('年齡：' + info.age);
console.log('父親姓名：' + info.family.father);
console.log('母親姓名：' + info.family.mother);
});

在上面的例子中，我們將一個包含多個屬性和子對象的JavaScript對象存儲在HTML元素的data-info屬性中。通過使用$.data函數來讀取數據，我們可以訪問到這個對象中的所有屬性。這是非常有用的功能，它可以幫助我們快速地訪問和修改網頁中的數據。

總之，$.data函數是一個非常有用的函數，它可以幫助我們存儲和訪問網頁中的數據。通過它，我們可以方便地將數據存儲在HTML元素中，并隨時通過JavaScript來讀取和修改它們。如果您想要在網頁中存儲數據，$.data函數會是一個非常好的選擇。