jqery中無法通過 .data(key,value)方法來設置 data-*的屬性

https://segmentfault.com/q/1010000004959330

誤解了data的用法, 試着看看jquery的源碼中data的封裝:data

很明顯的表明$(element).data(); 是需要html標籤中已經存在如這樣的<div data-name="xxx"></div>,所以題主找不到比較正常。

一般操作的時候,都會在html標籤中添加data-name="value",然後再通過jquery去修改

---

jquery的data方法並不會向attr屬性一樣,可以直接修改dom的屬性。

$("div").attr("data-name","haha")

通過jquery源碼可以得知,jquery把屬性爲data-*的html標籤獲取到,並取到data-*的value值,放在cache緩存裏面,其實質改動的只是data數據而已。並不會修改dom屬性。

<div data-name="value"> div's value </div>

$("div").data("name");   // 得到值 value

$("div").data("name","haha");   //改變data值，此時只是在cache裏面改變而已，其實質上並沒有修改data-name中的value。

// 此時仍然是 <div data-name="value"> div's value </div>, 但通過data獲取的值就不是標籤中的值了。

$("div").data("name");    //此時得到的值 是haha

//包括之後移除了data-name
$("div").removeAttr("data-name")   // 結果爲: [<div>​…​</div>​]

//此時獲取
$("div").data("name")  //值依然存在  haha

jQuery的data()方法只是作爲數據的一種存取而已.並不修改Dom屬性

如果想改變data-name中的值,建議直接用

$("div").attr("data-name","hahaha");

// <div data-name="hahaha"> div's value </div>

另外添加屬性,不能通過data的方法,只能通過

$("div").attr("data-name1","value1");
//<div data-name1="value1" data-name="value"></div>