jquery實現的讀取dat-*自定義資料程式碼例項

admin發表於2017-03-23
原文網址 : https://www.softwhy.com/article-4300-1.html
jQuery

本章節分享一段簡單的程式碼例項，它能夠讀取或者設定元素的dat-*自定義屬性值。

程式碼非常的簡單，僅供參考之用，這裡不多介紹，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul li{
  width:250px;
  height:20px;
  list-style:none;
  font-size:12px;
}
</style>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("li").each(function(v) {
    console.log($(this).data('name'));
  });
 
  $("li").eq(0).data('name','bryant');
  $("li").each(function(v){
    console.log($(this).data('name'));
  });
 
  $("li").eq(0).removeAttr('data-name');
  $("li").each(function(v) {
    console.log($(this).data('name'));
  });
})
</script>
<body>
<ul>
  <li data-name="css">css教程</li>
  <li data-name="javascript">javascript教程</li>
  <li data-name="div">div教程</li>
  <li data-name="jquery">jquery教程</li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，可能很多初學者還不知道console.log()的作用是什麼，這是在控制檯輸出資料，點選F12就可以檢視相應的執行結果了。

相關文章