這篇文章將為大家詳細(xì)講解有關(guān)如何使用HTML5新增屬性data-*，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司從2013年開始，先為費(fèi)縣等服務(wù)建站，費(fèi)縣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為費(fèi)縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

HTML5新增屬性data-*

書寫實(shí)例

<div data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options='{"name":"John"}'>
</div>

1. 定義:

data-* 屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)。

data-* 屬性賦予我們?cè)谒?HTML 元素上嵌入自定義 data 屬性的能力。

2. 注意點(diǎn):

data-* 屬性包括兩部分：

• 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個(gè)字符

• 屬性值可以是任意字符串

data-*屬性和jQuery交互

使用jQuery中的.data()函數(shù)取用data-*屬性值

console.log($("div").data('lastValue'));  //輸出的值為:43
console.log($("div").data('role'));  //輸出的值為:page

注意事項(xiàng)

data-**屬性名格式駝峰命名改寫

data-屬性是在第一次使用這個(gè)數(shù)據(jù)屬性后不再存取或改變（所有的數(shù)據(jù)值都在jQuery內(nèi)部存儲(chǔ)）

演示:
 

 console.log($("div").data('lastValue'));  //輸出的值為:43
    $('div').data('lastValue',44);  //設(shè)置data-last-value=44
    $('div')[2]  //假設(shè)這是文檔中的第3個(gè)div,我們輸出這個(gè)dom
    //輸出:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>

別怕,你再輸出

 console.log($("div").data('lastValue'));  //輸出的值為:44

  值只是存儲(chǔ)在jQuery內(nèi)部了

使用jQuery中.attr()函數(shù)取用data-*屬性值

console.log($('div').attr('data-role')); //輸出的值為:page
console.log($('div').attr('data-last-value')); //輸出的值為:43

使用jQuery中.attr()函數(shù)設(shè)置data-*屬性值

$('div').attr('data-emp',{'name':'zhangsan','age':23}); //給div添加一個(gè)data-emp的屬性,屬性值為一個(gè)json對(duì)象

注意:破折號(hào)要轉(zhuǎn)化成駝峰命名

關(guān)于“如何使用HTML5新增屬性data-*”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章名稱：如何使用HTML5新增屬性data-*
當(dāng)前URL：http://sd-ha.com/article16/ihhjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、電子商務(wù)、自適應(yīng)網(wǎng)站、網(wǎng)站排名、建站公司、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)