HTML5中data屬性如何使用

這篇文章主要介紹“HTML5中data屬性如何使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“HTML5中data屬性如何使用”文章能幫助大家解決問題。

　　<ul>

　　<li data-animal-type="bird">Owl</li>

　　<li data-animal-type="fish">Salmon</li>

　　<li data-animal-type="spider">Tarantula</li>

　　</ul>

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

　　data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

　　存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進(jìn)行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）。

　　data-* 屬性包括兩部分：

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

　　屬性值可以是任意字符串

　　上面的代碼是完全能夠接受的，但是有時我們需要保存時長、速度和作者等更多關(guān)于音頻本身的信息，而不是音頻來源。這就需要用到Data屬性了，示例如下：

　　<audio controls="controls">

　　<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />

　　</audio>

　　通過這些自定義的Data屬性，就能夠?qū)udio執(zhí)行搜尋、過濾以及分組等動作。

　　在JQuery中怎么使用Data屬性呢？JQuery提供了很多種從元素獲取數(shù)據(jù)的方式。例如，像下面這樣：

　　<a href="" class="button" data-info="The worlds most popular search engine">Google</a>

　　如果有一個和上面類似的錨文本標(biāo)記，有一個名為data-info的data屬性，利用下面的方式，可以獲取任何一個屬性，包括data-info

　　$（&lsquo;。button&lsquo;）。click（function（e） {

　　e.preventDefault（）;

　　thisdata = $（this）。attr（&lsquo;data-info&lsquo;）;

　　console.log（thisdata）;

　　}）;

關(guān)于“HTML5中data屬性如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。