jQuery數據篇-數據操作

.data( key, value )

給匹配元素關聯存儲任意data

.data(key,value)

.data(obj)

key

類型是字符串。

設置數據的名字的字符串。

value

新的數據的值；它會是任何Javascript類型包括數組或對象。

obj

類型是對象。

需要更新的鍵值對的對象。

.data()方法允許我們在DOM元素上附加任何類型的data數據，在避免循環引用的方式下是安全的，纔不會引起內存泄漏。

我們能給簡單的元素設置一些不同的值，然後再獲取它們：

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }} 返回的是javascript的對象

在jQuery1.4.3中設置一個元素的data對象是使用.data(obj)來擴充該元素以前存儲的data。jQuery自身使用.data()方法來保存在”evnets“和”handle“名字下的信息，並且保留任何以下劃線"_"開頭的名字用來內部使用。

在jQuery1.4.3之前（開始於jQuery1.4）.data()方法完全的替換了所有的data，而不是僅僅擴展了data對象。如果你正在使用第三方插件，不建議完全的替換元素的data對象，因爲插件也許也設置了data。

鑑於瀏覽器與插件和外部代碼交互的方式，.data()方法不能夠被用在<object>(除非是Flash插件)，<applet>或者<embed>元素上。

Note：這個方法現在還不提供在XML文檔上設置data的跨平臺支持，因爲IE現在不支持通過可設置和獲取布爾值（expando）的屬性來附加數據。

.data( key )

返回被data(name, value)設置的在jQuery集合中的第一個元素存儲的被命名的data的值

.data(key)

.data()

key

類型是字符串。

存儲數據的名字。

.data()方法允許我們在DOM元素上附加任何類型的data數據，在避免循環引用的方式下是安全的，纔不會引起內存泄漏。

我們可以在簡單元素上一次獲取一個值，或者一組值：

alert($('body').data('foo'));
alert($('body').data());

上面代碼會alert被設置在body元素上的data值。如果元素上沒有設置值，會被返回undefined。

alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar

HTML5 data-* 屬性

jQuery1.4.3中HTML5的data-屬性會自動的被放進jQuery的data對象中。對待含有的破折號"-"的屬性在jQuery1.6中被修改來符合W3c HTML5的規範。

比如：給出下面的HTML：

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

所有下面的jQuery代碼都正常工作。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

每個嘗試都是用來將字符串轉換爲JavaScript 的值（這個包括booleans,objects,arrays和null），不然當作字符串。要獲取字符串形式的屬性的值，不嘗試轉換它，可使用attr()方法。當data屬性是一個對象時（以{開頭或是一個數組（以[開頭）），使用jQuery.parseJSON來轉換字符串；他必須遵循的JSON語法包括加引號的屬性的名字。在第一次訪問data屬性的時候，data-屬性被放置進去，然後不再訪問或者改變（所有的data值然後被存儲在jQuery的內部）。

調用無參數的.data()方法獲取所有作爲Javacript對象的值。這個對象能夠被安全的緩存在變量中，只要這個新的對象不被使用.data(obj)方法。直接使用該對象來獲取或設置值比單獨的調用.data()來獲取或設置每一個值來的快。

var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

Note：這個方法現在還不提供在XML文檔上設置data的跨平臺支持，因爲IE現在不支持通過可設置和獲取布爾值（expando）的屬性來附加數據

.removeData( [name] )

移除以前存儲的data
.removeData([name])
.removeData([list])
name
類型是字符串。
刪除的數據的名字的字符串
list
類型是數組，字符串。
一個數組或者空格隔開的字符串命名的數據用來被刪除。

.remvoeData()方法允許我們移除先前使用.data()設置的值。當使用關鍵字的名字時，.removeData()會刪除那個特定的值；當不使用參數調用時，所有的值都會被移除。
從jQuery內部的.data()存儲區移除data對在文檔中的HTML5 data-屬性沒有作用；可以使用.removeAttr()移除。

當使用.removeData(“name”)時，如果在內部的data緩存區中沒有該名字的屬性，jQuery會嘗試在該元素上定位一個data-屬性。爲了避免再次查詢data-屬性，將該name的值設爲null或undefined（如.data("name",undefined)）而不是使用.removeData()方法。

jQuery1.7中，當使用包含關鍵字的數組或者以空格隔開的關鍵字字符串，.removeData()會刪除每一個在數組或者子串中的關鍵字對應的值。

jQuery1.4.3中，調用.removeData()會導致該屬性的值被刪除，並恢復在DOM文檔中相同名字的屬性的值，而不是被設置成undefined.