jquery怎么獲得元素data屬性值

jQuery獲取方法

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

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()的本質(zhì)其實是將一個 “cache” 附加到了對象上，并使用了一個特殊的屬性名稱。

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

//設(shè)置值

div.dataset.appid = 456;

div.dataset.myname = "newname";

//最終HTML結(jié)果

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

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

兼容性：

需要注意的是，dataset中大小寫的問題。帶連字符連接的名稱在使用的時候需要命名駝峰化。例如data-my-name對應(yīng)的是dataset.myName的值?？煽匆韵麓a

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

div.dataset.appId = 789;

div.dataset.myName = "secondname";

//最終結(jié)果

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

jquery easyui插件開發(fā)中的data用法

這就是一個為了一個方便。兩種調(diào)用方式。

一種是以對象的名義發(fā)起。

假設(shè)，obj是一個

jQuery對象

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

那我可以兩種方式調(diào)用data方法。

一種是obj.data(value);

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

怎么方便怎么用，沒有區(qū)別。

jquery data 怎么使用

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

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

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

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

data方法從元素中讀取數(shù)據(jù)的語法：

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

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

data方法從元素中存儲數(shù)據(jù)的語法：

$(selector).data(name,value)

name:必需。規(guī)定要設(shè)置的數(shù)據(jù)的名稱。

value:必需。規(guī)定要設(shè)置的數(shù)據(jù)的值。

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

$(selector).data(object)

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

Html代碼如下：

data方法之讀取數(shù)據(jù):

div id="divName" data-name="lichaoqiang"單個數(shù)據(jù):data-name="lichaoqiang"/div

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

script type="text/javascript"

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

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

/script

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

data方法之存儲數(shù)據(jù):

div id="container"這是一個div標(biāo)簽/div

script type="text/javascript"

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

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

/script

處理Jquery返回的data數(shù)據(jù)

可以這樣判斷一下嘛：

success:function(data){

$(data).each(function(id)

{

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

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

console.log($(this)[0].outerHTML);//得到包含DIV標(biāo)簽的內(nèi)容

});

}

jquery $.data 有什么實用性?

在元素上存放數(shù)據(jù),返回jQuery對象。

如果jQuery集合指向多個元素，那將在所有元素上設(shè)置對應(yīng)數(shù)據(jù)。

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

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

參數(shù)

keyStringV1.23

存儲的數(shù)據(jù)名.

key,valueString,AnyV1.2.3

key:存儲的數(shù)據(jù)名

value:將要存儲的任意數(shù)據(jù)

objobjectV1.4.3

一個用于設(shè)置數(shù)據(jù)的鍵/值對

data()V1.4.3

示例

描述:

在一個div上存取數(shù)據(jù)

HTML 代碼:

div/div

jQuery 代碼:

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

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

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

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

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

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

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

描述:

在一個div上存取名/值對數(shù)據(jù)

HTML 代碼:

div/div

jQuery 代碼:

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

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

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