Jquery是一種流行的JavaScript庫，它在網頁開發中具有廣泛的應用。其中，$.data()是Jquery中一個非常重要的方法，用于在DOM元素上讀取、設置及刪除數據。那么，它的原理是什么呢？

$.data = function( elem, name, data ) {
return jQuery.access( elem, name, data );
};

$.data()的定義十分簡短，它調用了另一個方法——jQuery.access()，我們重點來看看這個方法。

jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
var i = 0,
len = elems.length,
bulk = key == null;
//...
};

jQuery.access()方法會根據傳入的參數不同進行不同的操作。關于$.data()的使用，我們通常傳入三個參數，分別是待操作的DOM元素elem、數據鍵名name和可選的數據值data。

jQuery.access( elem, name, data )

因此，$.data()實際上是通過調用jQuery.access()來對DOM元素上的數據進行讀取、設置及刪除操作的。

通過jQuery.access()方法，我們可以將數據存儲在DOM元素上。這對于某些情況下非常有用，比如存儲數據用于事件綁定、UI控件初始化等。

// 在元素上存儲數據，key為foo，value為bar
$('button').data('foo', 'bar');
// 從元素上讀取數據，key為foo
var value = $('button').data('foo');
console.log(value); // 'bar'
// 刪除元素上的數據，key為foo
$('button').removeData('foo');

總結：通過$.data()方法，我們可以很方便地在DOM元素上存儲和讀取數據。其原理是通過調用jQuery.access()方法實現的，具體實現細節可以通過閱讀Jquery源碼進行深入理解。