jQuery data()

admin發表於2017-02-21
jQuery

在匹配元素上儲存任意相關資料或返回匹配元素集合中第一個元素給定名稱的資料的值。

能夠獲取的值是通過data(key,value)或HTML5 data-*設定的值。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.data(key, value)

引數解析:

（1）.key:規定要設定的資料的名稱。

（2）.value:規定要設定的資料的值。

jQuery1.2.3版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.data(obj)

引數解析:

obj:一個用於更新資料的鍵/值對物件。

jQuery1.4.3版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.data(key)

引數解析:

key:規定要獲取資料的名稱。

jQuery1.2.3版本新增。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
.data()

引數解析:

如果沒有引數，那麼就是獲取第一個匹配元素通過data(name,value)或HTML5 data-*設定的值。

jQuery1.4版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function () {
  var oshow = $("#show");
  var odata = $("#data");
  odata.data("address","青島市南區");
  oshow.html(odata.data("address"));
})
</script>
</head>
<body>
<div id="data"></div>
<div id="show"></div>
</body>
</html>

上面的程式碼首先為元素附加資料，然後再寫入指定的div元素。

特別說明:

（1）.此方法附加的資料不會影響HTML結構，也就是說不會改變HTML的結果:

a:3:{s:3:\"pic\";s:43:\"portal/201702/21/155556zieeo2q2fezccoo8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

雖然為元素附加了資料，但是HTML結構上並沒有出現。

（2）.undefined不是認可的資料值。比如這樣設定資料data("name", undefined) ，將返回"name"對應的資料， 也就是等同於呼叫.data("name")。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function () {
  var oshow = $("#show");
  var odata = $("#data");
  odata.data({address:"青島市南區"});
  oshow.html(odata.data("address"));
})
</script>
</head>
<body>
<div id="data"></div>
<div id="show"></div>
</body>
</html>

也可以採用鍵/值對物件方式為匹配元素附加資料。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function () {
  var oshow = $("#show");
  var odata = $("#data");
  odata.data({"div-css":"螞蟻部落"});
  console.log(odata.data());
})
</script>
</head>
<body>
<div id="data"></div>
<div id="show"></div>
</body>
</html>

jQuery3.0版本以後，如果資料名稱是以"-"連線，內部會將其轉換為駝峰命名規則。

上面程式碼截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/21/160434q9zd9a2id8yef2fe.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章