摘要:微格式主要是為人類設(shè)計的用于介紹上下文信息的。利用微格式的代碼如下相反,利用屬性的代碼如下了解更多關(guān)于微格式的信息在中使用屬性既然在標(biāo)記中實現(xiàn)了屬性,那么也可以在中使用這個屬性了。
HTML 5的Data屬性可以讓你給元素自定義數(shù)據(jù)。這篇文章就是思考怎么更好的使用Data屬性。
**介紹**
HTML 5之前,我們必須依賴于class和rel屬性來存儲需要在網(wǎng)站中使用的數(shù)據(jù)片段,這種做法有時會在網(wǎng)站的外觀和實用性之間產(chǎn)生沖突。而HTML 5 Data屬性的存在就能很好滿足需要。
隨著網(wǎng)站自身的數(shù)據(jù)越來越多,一些特定的元素也開始保存數(shù)據(jù)了。比如,要創(chuàng)建一個audio應(yīng)用,代碼如下:
上面的代碼是完全能夠接受的,但是有時我們需要保存時長、速度和作者等更多關(guān)于音頻本身的信息,而不是音頻來源。這就需要用到Data屬性了,示例如下:
通過這些自定義的Data屬性,就能夠?qū)udio執(zhí)行搜尋、過濾以及分組等動作。
怎么使用Data屬性
自定義的Data屬性的名字必須以data-開頭,并且連字號后面至少要有一個符合HTML規(guī)范的字符。(HTML naming convention.)
W3C文檔對Data屬性的說明如下:
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
這也意味著我們只能在應(yīng)用程序內(nèi)部使用data數(shù)據(jù),而不應(yīng)該將它呈現(xiàn)給用戶。更重要的是你可以給元素自定義任何數(shù)量的Data屬性,并賦予任何有意義的值。
什么時候需要使用Data屬性?
通過上面的講述,已經(jīng)知道怎么使用Data屬性了。但為了更好地了解這個屬性,再看幾個例子。
在Tuts+的Webdesign板塊已經(jīng)有了很好地、關(guān)于使用data屬性的例子。One of the tuts,將Data屬性運(yùn)用到樣式中,讓菜單有一個“氣泡”通知效果。在這個示例中,data屬性被用于只想氣泡通知的值。
Profile
另外一個示例:quick tip,Data屬性作為提示信息是怎么被用于提示框的
This is the link
什么時候不該用Data屬性?
當(dāng)元素已經(jīng)建立或者更適當(dāng)?shù)膶傩詴r,就不應(yīng)該用Data屬性了。在下面這個示例中運(yùn)用data是不合適的:
8pm
因為在一個表示時間的元素中,已經(jīng)有一個datetime屬性了:
同時,Data屬性不應(yīng)該被用作一個可替代的元數(shù)據(jù)或者微格式。微格式主要是為人類設(shè)計的、用于介紹上下文信息的。比如,如果你有一張關(guān)于個人或者某個組織聯(lián)系信息的Vcard,你應(yīng)該賦予一個名為vcard的class屬性,讓機(jī)器明白它包含了一些聯(lián)系的信息。
利用微格式的代碼如下:
Aaron Lumsden
相反,利用Data屬性的代碼如下:
Aaron Lumsden
了解更多關(guān)于微格式的信息:Mircorformats.org.
在CSS中使用Data屬性
既然在HTML標(biāo)記中實現(xiàn)了Data屬性,那么也可以在CSS中使用這個屬性了。注意:盡管在某些情況下更適合直接使用Data屬性,那也不應(yīng)該對任何樣式規(guī)則直接使用該屬性。簡單的使用如下:
[data-role="page"] { /* Styles */ }
在JQuery中使用Data屬性
在JQuery中怎么使用Data屬性呢?JQuery提供了很多種從元素獲取數(shù)據(jù)的方式。例如,像下面這樣:
如果有一個和上面類似的錨文本標(biāo)記,有一個名為data-info的data屬性,利用下面的方式,可以獲取任何一個屬性,包括data-info
$(".button").click(function(e) { e.preventDefault(); thisdata = $(this).attr("data-info"); console.log(thisdata); });
譯文首發(fā):http://www.ido321.com/1304.html
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49559.html
摘要:和是提供的,可用于請求之間保存數(shù)據(jù)。關(guān)閉窗口后,即被銷毀。答當(dāng)解析器遇到標(biāo)簽時,文檔的解析將停止,并立即下載并執(zhí)行腳本,腳本執(zhí)行完畢后將繼續(xù)解析文檔。而的腳本不同,只要腳本下載完成,將會立即執(zhí)行,未必會按照聲明順序執(zhí)行。 1 . doctype(文檔類型) 的作用是什么? ☆ 對文檔進(jìn)行有效性驗證: 它告訴用戶代理和校驗器這個文檔是按照什么DTD 寫的。這個動作是被動的, 每次...
摘要:五的子類對象會返回一個集合對象,集合內(nèi)存儲類型的元素。七的子類初看很有可能以為集合元素就是單選表單元素,其實可以存儲任意類型的表單元素。八的子類開始,將返回子類的對象,其行為特征和一致。但在前,我們應(yīng)該先了解清楚的類型的特征。 一、前言 大家先看看下面的js,猜猜結(jié)果會怎樣吧! 可選答案: ①. 獲取id屬性值為id的節(jié)點元素 ②...
摘要:如果我們作為一個后端開發(fā)者想掌握一個前端框架,是一個好選擇,因為它足夠的易學(xué)。是語言的下一代標(biāo)準(zhǔn)。數(shù)據(jù)方法生命周期鉤子函數(shù)其他有些內(nèi)容比較重要,留到后面講定義數(shù)據(jù)定義數(shù)據(jù)定義了數(shù)據(jù),那么就可以在管理的區(qū)域中使用的獲取數(shù)據(jù)的語法來獲取數(shù)據(jù)。目錄 前言: iview組件庫示例 element組件庫示例 ...
閱讀 2398·2021-11-23 09:51
閱讀 1209·2021-11-22 13:54
閱讀 3422·2021-09-24 10:31
閱讀 1066·2021-08-16 10:46
閱讀 3619·2019-08-30 15:54
閱讀 700·2019-08-30 15:54
閱讀 2886·2019-08-29 17:17
閱讀 3154·2019-08-29 15:08