將資料存放於html元素或者從html元素刪除

antzone發表於2017-03-29
HTML

本章介紹一下如何利用jQuery在html元素上儲存和刪除資料。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("#bt").click(function(){
    var obj={
      webName:"螞蟻部落",
      url:"softwhy.com"
    }
    var div = $("div")[0];
    jQuery.data(div, "antzone",obj);
    $("#show").text(jQuery.data(div,"antzone").url)
  })
});
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼為html元素新增資料，然後讀取資料寫入div中。

jQuery.data()方法可以參閱jQuery.data()一章節。

下面再看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var obj={
    webName:"螞蟻部落",
    url:"softwhy.com"
  }
  var div = $("div")[0];
  $.data(div, "antzone",obj);
  $("#add").click(function(){
    $("#show").text(jQuery.data(div,"antzone").url)
  })
  $("#del").click(function(){
    $.removeData( div, "antzone");
  })
});
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="add" value="顯示資料"/>
<input type="button" id="del" value="刪除資料"/>
</body>
</html>

上面的程式碼點選刪除按鈕按鈕之後，繫結在html元素的資料已經被刪除，所以就無法再顯示了。

$.removeData()方法可以參閱jQuery removeData()一章節。

相關文章