資訊專欄INFORMATION COLUMN
摘要：微格式主要是為人類設(shè)計(jì)的用于介紹上下文信息的。利用微格式的代碼如下相反，利用屬性的代碼如下了解更多關(guān)于微格式的信息在中使用屬性既然在標(biāo)記中實(shí)現(xiàn)了屬性，那么也可以在中使用這個(gè)屬性了。
HTML 5的Data屬性可以讓你給元素自定義數(shù)據(jù)。這篇文章就是思考怎么更好的使用Data屬性。
**介紹**
HTML 5之前，我們必須依賴于class和rel屬性來存儲需要在網(wǎng)站中使用的數(shù)據(jù)片段，這種做法有時(shí)會(huì)在網(wǎng)站的外觀和實(shí)用性之間產(chǎn)生沖突。而HTML 5 Data屬性的存在就能很好滿足需要。
隨著網(wǎng)站自身的數(shù)據(jù)越來越多，一些特定的元素也開始保存數(shù)據(jù)了。比如，要?jiǎng)?chuàng)建一個(gè)audio應(yīng)用，代碼如下：
上面的代碼是完全能夠接受的，但是有時(shí)我們需要保存時(shí)長、速度和作者等更多關(guān)于音頻本身的信息，而不是音頻來源。這就需要用到Data屬性了，示例如下：
通過這些自定義的Data屬性，就能夠?qū)udio執(zhí)行搜尋、過濾以及分組等動(dòng)作。
怎么使用Data屬性
自定義的Data屬性的名字必須以data-開頭，并且連字號后面至少要有一個(gè)符合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屬性，并賦予任何有意義的值。
什么時(shí)候需要使用Data屬性？
通過上面的講述，已經(jīng)知道怎么使用Data屬性了。但為了更好地了解這個(gè)屬性，再看幾個(gè)例子。
在Tuts+的Webdesign板塊已經(jīng)有了很好地、關(guān)于使用data屬性的例子。One of the tuts，將Data屬性運(yùn)用到樣式中，讓菜單有一個(gè)“氣泡”通知效果。在這個(gè)示例中，data屬性被用于只想氣泡通知的值。
Profile
另外一個(gè)示例：quick tip，Data屬性作為提示信息是怎么被用于提示框的
This is the link
什么時(shí)候不該用Data屬性？
當(dāng)元素已經(jīng)建立或者更適當(dāng)?shù)膶傩詴r(shí)，就不應(yīng)該用Data屬性了。在下面這個(gè)示例中運(yùn)用data是不合適的：
8pm
因?yàn)樵谝粋€(gè)表示時(shí)間的元素中，已經(jīng)有一個(gè)datetime屬性了：
同時(shí)，Data屬性不應(yīng)該被用作一個(gè)可替代的元數(shù)據(jù)或者微格式。微格式主要是為人類設(shè)計(jì)的、用于介紹上下文信息的。比如，如果你有一張關(guān)于個(gè)人或者某個(gè)組織聯(lián)系信息的Vcard,你應(yīng)該賦予一個(gè)名為vcard的class屬性，讓機(jī)器明白它包含了一些聯(lián)系的信息。
利用微格式的代碼如下：
Aaron Lumsden
相反，利用Data屬性的代碼如下：
Aaron Lumsden
了解更多關(guān)于微格式的信息：Mircorformats.org.
在CSS中使用Data屬性
既然在HTML標(biāo)記中實(shí)現(xiàn)了Data屬性，那么也可以在CSS中使用這個(gè)屬性了。注意：盡管在某些情況下更適合直接使用Data屬性，那也不應(yīng)該對任何樣式規(guī)則直接使用該屬性。簡單的使用如下：
[data-role="page"] {
/* Styles */
}
在JQuery中使用Data屬性
在JQuery中怎么使用Data屬性呢？JQuery提供了很多種從元素獲取數(shù)據(jù)的方式。例如，像下面這樣：
如果有一個(gè)和上面類似的錨文本標(biāo)記，有一個(gè)名為data-info的data屬性，利用下面的方式，可以獲取任何一個(gè)屬性，包括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://m.hztianpu.com/yun/49559.html
摘要：和是提供的，可用于請求之間保存數(shù)據(jù)。關(guān)閉窗口后，即被銷毀。答當(dāng)解析器遇到標(biāo)簽時(shí)，文檔的解析將停止，并立即下載并執(zhí)行腳本，腳本執(zhí)行完畢后將繼續(xù)解析文檔。而的腳本不同，只要腳本下載完成，將會(huì)立即執(zhí)行，未必會(huì)按照聲明順序執(zhí)行。 1 . doctype(文檔類型) 的作用是什么？ ☆ 對文檔進(jìn)行有效性驗(yàn)證: 它告訴用戶代理和校驗(yàn)器這個(gè)文檔是按照什么DTD 寫的。這個(gè)動(dòng)作是被動(dòng)的， 每次...
摘要：五的子類對象會(huì)返回一個(gè)集合對象，集合內(nèi)存儲類型的元素。七的子類初看很有可能以為集合元素就是單選表單元素，其實(shí)可以存儲任意類型的表單元素。八的子類開始，將返回子類的對象，其行為特征和一致。但在前，我們應(yīng)該先了解清楚的類型的特征。 一、前言 大家先看看下面的js，猜猜結(jié)果會(huì)怎樣吧！ 可選答案： ①. 獲取id屬性值為id的節(jié)點(diǎn)元素 ②...
摘要：如果我們作為一個(gè)后端開發(fā)者想掌握一個(gè)前端框架，是一個(gè)好選擇，因?yàn)樗銐虻囊讓W(xué)。是語言的下一代標(biāo)準(zhǔn)。數(shù)據(jù)方法生命周期鉤子函數(shù)其他有些內(nèi)容比較重要，留到后面講定義數(shù)據(jù)定義數(shù)據(jù)定義了數(shù)據(jù)，那么就可以在管理的區(qū)域中使用的獲取數(shù)據(jù)的語法來獲取數(shù)據(jù)。目錄 前言： iview組件庫示例 element組件庫示例 ...
閱讀 2471·2021-11-23 09:51
閱讀 1273·2021-11-22 13:54
閱讀 3500·2021-09-24 10:31
閱讀 1187·2021-08-16 10:46
閱讀 3710·2019-08-30 15:54
閱讀 770·2019-08-30 15:54
閱讀 2952·2019-08-29 17:17
閱讀 3247·2019-08-29 15:08
