jquery怎么獲得元素data屬性值

jQuery獲取方法

成都創新互聯公司服務項目包括建陽網站建設、建陽網站制作、建陽網頁制作以及建陽網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，建陽網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到建陽省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

data()方法

//HTML代碼?div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"/div

//獲取屬性

var appid = $("#myDiv").data("appid"); //123

var app-id = $("#myDiv").data("app-id"); //456

//屬性賦值?$("#myDiv").data("appid","666");

//最終HTML代碼?div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"/div

需要注意的是，data()的值進行修改并不會影響到DOM元素上的data-*屬性的改變。data()的本質其實是將一個 “cache” 附加到了對象上，并使用了一個特殊的屬性名稱。

所以上述代碼中，雖然對div進行了data()賦值操作，但HTML代碼中div的data-appid的值仍然為123，因為data()只是修改了緩存的那個值，此時進行$('#myDiv').data("appid")的操作，輸出的結果為666.

js獲取data-*的方式

通過dataset屬性訪問

//HTML代碼

div id="myDiv" data-appid="123" data-myname="lsxj"/div

//js代碼

var div = document.getElementById("myDiv");

var appId = div.dataset.appid;//獲取data-appid的值

var myName = div.dataset.myname;//獲取data-myname的值

//設置值

div.dataset.appid = 456;

div.dataset.myname = "newname";

//最終HTML結果

div id="myDiv" data-appid="456" data-myname="newname"/div

dataset屬性的值是DOMStringMap的一個實例，名值對的映射。每個data-name形式的屬性都有一個對應的屬性，只不過該屬性名沒有data-前綴。

兼容性：

需要注意的是，dataset中大小寫的問題。帶連字符連接的名稱在使用的時候需要命名駝峰化。例如data-my-name對應的是dataset.myName的值。可看以下代碼

//將上面代碼的設置值部分進行修改

div.dataset.appId = 789;

div.dataset.myName = "secondname";

//最終結果

div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"/div

jquery easyui插件開發中的data用法

這就是一個為了一個方便。兩種調用方式。

一種是以對象的名義發起。

假設，obj是一個

jQuery對象

,value是我想綁定在dom節點上的一個值，可以是數字、字符串或者對象。

那我可以兩種方式調用data方法。

一種是obj.data(value);

第二種是$.data(obj,value);

怎么方便怎么用，沒有區別。

jquery data 怎么使用

jquery中data() 方法向被選元素附加數據，或者從被選元素獲取數據。

jquery中data() 方法向被選元素附加數據，或者從被選元素獲取數據。這使我們通過HTML自定義屬性，操作數據，顯得非常方便。通常我們也會通過給html自定義屬性這樣的做法，來存儲和操作數據。在jquery中也給我們

提供了data(name,value)這樣的方法，來非常方便的實現。有了data()這個方法，你就可以很方便的在一個html標簽中添加data-*這樣的自定義屬性。接下來，就data()方法簡單的做下了解。

以下是摘自w3school中對data用法的說明：

data方法從元素中讀取數據的語法：

$(selector).data(name) name:可選。規定要取回的數據的名稱。

如果沒有規定名稱，則該方法將以對象的形式從元素中返回所有存儲的數據。

data方法從元素中存儲數據的語法：

$(selector).data(name,value)

name:必需。規定要設置的數據的名稱。

value:必需。規定要設置的數據的值。

當然，我們在這里，也可以把一個包含鍵/值對的對象，向被選元素添加數據。語法如下：

$(selector).data(object)

object:必需。規定包含名稱/值對的對象。

Html代碼如下：

data方法之讀取數據:

div id="divName" data-name="lichaoqiang"單個數據:data-name="lichaoqiang"/div

div id="divJson" data-user='{"user_id":20141111,"user_name":"lichaoqiang"}'存儲json數據:{"user_id":20141111,"user_name":"lichaoqiang"}/div

script type="text/javascript"

console.log($("#divName").data("name")); //通過name輸出單個數據

console.log($("#divJson").data("user").user_name); //通過name輸出json數據

/script

注意：在元素data-*屬性中設置json數據時，需要注意單雙引號，否則可能出現undefined的,獲取不到數據。正確的做法是用雙引號。

data方法之存儲數據:

div id="container"這是一個div標簽/div

script type="text/javascript"

$("#container").data("name", "lichaoqiang");//存儲數據

console.log($("#container").data("name"));//通過name讀取數據

/script

處理Jquery返回的data數據

可以這樣判斷一下嘛：

success:function(data){

$(data).each(function(id)

{

//這里面的$使用，貌似只能把data當作是XML處理

if($(this).attr('class')=="list_pic")//判斷是不是list_pic類

console.log($(this)[0].outerHTML);//得到包含DIV標簽的內容

});

}

jquery $.data 有什么實用性?

在元素上存放數據,返回jQuery對象。

如果jQuery集合指向多個元素，那將在所有元素上設置對應數據。

這個函數不用建立一個新的expando，就能在一個元素上存放任何格式的數據，而不僅僅是字符串。

V1.4.3 新增用法NEW data(obj) 可傳入key-value形式的數據。

參數

keyStringV1.23

存儲的數據名.

key,valueString,AnyV1.2.3

key:存儲的數據名

value:將要存儲的任意數據

objobjectV1.4.3

一個用于設置數據的鍵/值對

data()V1.4.3

示例

描述:

在一個div上存取數據

HTML 代碼:

div/div

jQuery 代碼:

$("div").data("blah"); // undefined

$("div").data("blah", "hello"); // blah設置為hello

$("div").data("blah"); // hello

$("div").data("blah", 86); // 設置為86

$("div").data("blah"); // 86

$("div").removeData("blah"); //移除blah

$("div").data("blah"); // undefined

描述:

在一個div上存取名/值對數據

HTML 代碼:

div/div

jQuery 代碼:

$("div").data("test", { first: 16, last: "pizza!" });

$("div").data("test").first //16;

$("div").data("test").last //pizza!;