jquery操作HTML5 的data-*的用法實例分享

更新時間：2014年08月17日 17:15:38 投稿：hebedich

從jQuery 1.4.3起， HTML 5 data- 屬性將自動被引用到jQuery的數(shù)據(jù)對象中。也就是說雖然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3庫以上的.還是可以在非HTML5的頁面或瀏覽器里, 仍然可以使用.data(obj)方法來操作"data-*" 數(shù)據(jù).

閱讀HTML5的詳細規(guī)范后你會發(fā)現(xiàn)，這個自定義data屬性的用法非常的簡單，就是你可以往HTML標簽上添加任意以 "data-"開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面布局和風格，但它卻是可讀可寫的。

jquery 里已經(jīng)內(nèi)置這個方法. 通過 $(‘#content‘).data(‘list'); 就能獲取數(shù)據(jù). 這個方法是在 jQuery1.4.3版本后出現(xiàn)的,它能返回相應的data屬性.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML5 的data-*的用法</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
    //讀取data-*的值
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });

    //設(shè)置data-*的值
    $("li").eq(0).data('name','bryant');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });

    //刪除data-*的值   這里使用的是removeAttr，測試官方的removeData是不起作用的
    $("li").eq(0).removeAttr('data-name');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
})
</script>
<body>
<ul>
    <li data-name="kobe">科比</li>
    <li data-name="gasol">加索爾</li>
    <li data-name="nash">納什</li>
    <li data-name="fisher">費舍爾</li>
</ul>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

jquery1.4后 jqDrag 拖動不可用
jquery 升級到1.4后 jqDrag 拖動不可用的修改方法
2010-02-02
jquery 動態(tài)創(chuàng)建元素的方式介紹及應用
動態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁面加載的時候最好在頁面加載完后執(zhí)行創(chuàng)建，感興趣的朋友可以了解下
2013-04-04
查看源碼的工具學習jQuery源碼不錯的工具
jQuery是一個非常好用的javascript框架，我尤其喜歡它強大的選擇器和鏈式表達式，使得我們能通過簡單的語句實現(xiàn)復雜的功能。它還有一個重要的特點就是它的可擴展性，使得很多人都可以開發(fā)他們的插件并且分享出來
2011-12-12
jQuery bt氣泡實現(xiàn)懸停顯示及移開隱藏功能的方法
這篇文章主要介紹了jQuery bt氣泡實現(xiàn)懸停顯示及移開隱藏功能的方法,通過頁面元素屬性的動態(tài)變換實現(xiàn)氣泡提示框的效果,需要的朋友可以參考下
2016-07-07
jQuery Validate初步體驗(二)
這篇文章主要介紹了jQuery Validate初步體驗(二) 的相關(guān)資料,需要的朋友可以參考下
2015-12-12
利用jquery操作Radio方法小結(jié)
用Radio來實現(xiàn)用戶的選擇效果，在項目中積累了一些利用JQUERY來操作Radio的方法，這里與大家分享下
2014-10-10
jQuery soColorPacker 網(wǎng)頁拾色器
這篇文章主要介紹了jQuery soColorPacker 網(wǎng)頁拾色器的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫
這篇文章主要介紹了基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫的相關(guān)資料，焦點圖中的圖片利用了CSS3的相關(guān)特性實現(xiàn)圖片傾斜效果，從而讓圖片出現(xiàn)3D的視覺效果，感興趣的小伙伴們可以參考一下
2016-03-03
jquery寫個checkbox——類似郵箱全選功能
最近在學習jquery，今天抽空用jquery寫個checkbox——類似郵箱全選功能，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
通過XMLHttpRequest和jQuery實現(xiàn)ajax的幾種方式
AJAX大家已經(jīng)都知道了，是為了實現(xiàn)異步通訊，提高用戶體驗度，而將很多舊知識（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一個新的知識框架。而，XMLHttpRequest對象則是其中的重重之中,本篇文章主要給大家介紹通過XMLHttpRequest和jQuery實現(xiàn)ajax的幾種方式
2015-08-08