手机购彩

杭州做网站:您需要了解的HTML5数据属性

2019.08.02 mf_web

84

HTML5数据属性允许您将自定义数据分配给元素。本文介绍了如何使用它,并提供了理想情况下使用它的示例。杭州做网站

介绍

在(zai)(zai)HTML5之前,我(wo)们(men)不得不依赖于使用“class”或“rel”属(shu)性(xing)来存储我(wo)们(men)可以在(zai)(zai)网(wang)站中(zhong)使用的(de)小数(shu)据(ju)片段。这(zhei)有时会导致(zhi)问(wen)题,并可能导致(zhi)网(wang)站的(de)样式和功能之间发(fa)生冲突。HTML5的(de)出(chu)现引入了一个称为“数(shu)据(ju)”的(de)新属(shu)性(xing)。在(zai)(zai)本文(wen)中(zhong),我(wo)将讨论一些如何使用此属(shu)性(xing)以及(ji)如何正确使用它的(de)示例。

随着网(wang)站越来越受数据驱(qu)动和应用程序的(de)影响,他们开始掌握更多有关特定元素(su)的(de)数据。例如,如果我们正(zheng)在创建一个音频应用程序。我们可能有标(biao)准(zhun)的(de)标(biao)记,例如:

1
2
3
<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" />
</audio>

上述(shu)标记是完全(quan)可(ke)以(yi)接受的(de)(de)(de),但有时我们(men)可(ke)能希望存储除源(yuan)以(yi)外的(de)(de)(de)每个轨道的(de)(de)(de)更多(duo)信息。例(li)如(ru),我们(men)可(ke)能希望能够分配其他特定的(de)(de)(de)曲目信息,例(li)如(ru)持(chi)续(xu)时间,节奏和艺术家。我们(men)可(ke)以(yi)通过为每个音频源(yuan)分配自(zi)定义数据属性来(lai)实现此目的(de)(de)(de),例(li)如(ru):

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

通过提供这些(xie)自定义数据属性,我们可(ke)以执行诸如(ru)在(zai)持续(xu)时间,节奏或(huo)艺术家使(shi)用其(qi)关联值在(zai)我们的应用程序中搜索,过滤或(huo)分组任(ren)务。

如何使用数据属性

数据(ju)属性的(de)名(ming)称必(bi)须以字符(fu)串'data-'开头,并且必(bi)须在连(lian)字符(fu)后面包含至少一(yi)个(ge)使用任何HTML命名(ming)约定的(de)字符(fu)。

数据属(shu)性的W3C规范声明(ming):

自定义数(shu)据属性(xing)旨(zhi)在将(jiang)自定义数(shu)据存储(chu)为页面或应用(yong)程(cheng)序的(de)私(si)有数(shu)据,因为没有更合(he)适的(de)属性(xing)或元素。

这(zhei)意(yi)味着我(wo)们(men)应(ying)该(gai)只在我(wo)们(men)的应(ying)用(yong)(yong)(yong)程(cheng)序内部使(shi)用(yong)(yong)(yong)该(gai)数据,它(ta)不应(ying)该(gai)用(yong)(yong)(yong)于向我(wo)们(men)的用(yong)(yong)(yong)户显示信(xin)息(xi)。同样重(zhong)要(yao)的是要(yao)注意(yi),您(nin)可(ke)以为具有任何(he)值的元素分配任意(yi)数量的自(zi)定义属性。

我应该何时使用数据属性?

我们已经(jing)看(kan)过你如何使(shi)用(yong)数据(ju)属(shu)性,但为了让(rang)你清楚地理解,让(rang)我们再看(kan)几个例子。

幸运的(de)是,Webdesigntuts +已(yi)经对一(yi)些好的(de)用(yong)例示例进行了详细介绍(shao)。其中(zhong)(zhong)一(yi)个(ge)关键(jian)是通过在锚(mao)标记中(zhong)(zhong)分配通知(zhi)项(xiang)来(lai)查(cha)看如(ru)何(he)使(shi)用(yong)它们来(lai)设置和显示菜单(dan)通知(zhi)气泡。这次data属性用(yong)于指示通知(zhi)气泡的(de)气泡值。

1
<a href="#" class="pink" data-bubble="2">Profile</a>

在另(ling)一(yi)个快速(su)提(ti)示(shi)中,我们(men)还可以看到它如(ru)何用作(zuo)工具(ju)提(ti)示(shi)的标记的一(yi)部分

1
<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

此时间(jian)用于显示工具(ju)提(ti)示的文本。

我什么时候不应该使用数据属性?

我(wo)们(men)不(bu)应该为已经建(jian)立(li)或更合(he)适的属(shu)性使(shi)用数据属(shu)性。例(li)如,使(shi)用它是不(bu)合(he)适的:

1
<span data-time="20:00">8pm<span>

当我(wo)们可以datetime在time如下元(yuan)素中(zhong)使用(yong)已定义的属性时(shi):

1
<time datetime="20:00">8pm</time>

数(shu)据(ju)属(shu)性不应用作元数(shu)据(ju)或(huo)微格式的(de)替代(dai)。微格式主(zhu)要是为人类(lei)设计的(de),并且是为了(le)给出我(wo)们的(de)标记上下文而引入的(de)。例如,如果您有(you)一个(ge)Vcard提供有(you)关个(ge)人或(huo)组织的(de)联(lian)系信息,那么您可以给它一类(lei)“vcard”,让(rang)机器了(le)解这是联(lian)系信息。

使用(yong)(yong)微格式(shi),你应该使用(yong)(yong)你的标记

1
2
3
<div class="vcard">
 <span class="fn " >Aaron Lumsden</span>
</div>

而不(bu)是使用数据属性,如(ru)

1
2
3
<div class="vcard">
 <span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>

要了解有(you)关(guan)微格式的更多信息(xi),请(qing)访问Mircorformats.org。

使用CSS的数据属性

一(yi)旦(dan)我们(men)在(zai)HTML标(biao)记(ji)中(zhong)实(shi)现(xian)了数(shu)(shu)据(ju)属性,我们(men)就可(ke)以(yi)使用CSS来定(ding)(ding)位它们(men)。重要的是(shi)要注意,不应该直接使用数(shu)(shu)据(ju)属性来使用样(yang)(yang)式,尽(jin)管在(zai)某些情况下它可(ke)能是(shi)合适的。在(zai)CSS中(zhong)定(ding)(ding)位数(shu)(shu)据(ju)属性与定(ding)(ding)位其他属性类似,您(nin)可(ke)以(yi)像下面这样(yang)(yang)使用它们(men):

1
2
3
[data-role="page"] {
  /* Styles */
}

例如,如果您要创建跨设(she)备友好的(de)(de)网站或应(ying)用程序,那么您可(ke)能希望定位(wei)一(yi)些您只应(ying)在移动设(she)备上查(cha)看的(de)(de)特定内(nei)容。采取以下标记

1
2
3
<div data-role="mobile">
Mobile only content
</div>

使用(yong)CSS,您可(ke)以在桌面上查看(kan)时隐藏所(suo)有仅(jin)限移动设备的(de)页面。

1
2
3
div[data-role="mobile"] { 
  display:none; 
}

虽然不(bu)建议基于查看设备(bei)隐藏内容,但可能(neng)存(cun)在适(shi)合的(de)情(qing)况。您应该根据(ju)每个具体情(qing)况和案例(li)来确定这一点(dian)。

也可以使用(yong)属(shu)性中(zhong)的数(shu)据并通过CSS显(xian)示它。尽管规(gui)范(fan)说您不应该使用(yong)自(zi)定义属(shu)性中(zhong)的数(shu)据向用(yong)户显(xian)示,但是(shi)(shi)在某些(xie)情况下可能是(shi)(shi)最好的方法(fa)。这(zhei)就是(shi)(shi)它的实(shi)现(xian)方式。

1
<div class="test" data-content="This is the div content">test</div>

在(zai)CSS中,您将(jiang)使用(yong)':after'伪元(yuan)素(su)(或其他一(yi)些生成(cheng)的内容(rong))并将(jiang)该属(shu)性用(yong)作'after'内容(rong)的一(yi)部分(fen),如下所示:

1
2
3
4
6
7
.test {
  display: inline-block;
}
 
.test:after {
  content: attr(data-content);
}

然后,这将(jiang)在(zai)'.text'div中显示'This is the div content'。 

使用数据属性使用jQuery

现在我(wo)们(men)已经(jing)了(le)解了(le)如(ru)何使用(yong)CSS使用(yong)data属性来定位(wei)元素,让我(wo)们(men)看(kan)一(yi)下如(ru)何使用(yong)jQuery获取数据。

注意:处理数据超(chao)出了(le)本(ben)教程(cheng)的范围,因为本(ben)教程(cheng)专门针对前端开发(fa)人员和设计人员。

我们可以通过几种方法使用jQuery从(cong)元素中(zhong)(zhong)获取数据。让我们来看看其中(zhong)(zhong)的一些。

1
<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

如果我(wo)们有一(yi)个锚标记(ji),就像上面那(nei)个,它具(ju)有data-info的数据(ju)属(shu)性,那(nei)么我(wo)们可(ke)以像获取任何其他属(shu)性值一(yi)样访问该数据(ju)。

1
2
3
4
$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

您可以通(tong)过在Web检查器中打(da)开js控制(zhi)台,然后点击链接来测试(shi)它。

关于data属(shu)性的(de)好处(chu)是(shi)我们也可(ke)以使用它来(lai)提供这样的(de)json数据。

1
<a href="google"  class="button" data-info='{"foo":"bar"}'></a>

使(shi)用jQuery我们(men)可以使(shi)用jQuery的数据对象方法获取这些数据。

1
2
3
4
$('.button').click(function(e) {
   e.preventDefault();
    thisdata = $('div').data('info').foo;
   console.log(thisdata);
 });

然后,上面的示例将“bar”记录到控制台日志(zhi)中(zhong)。

跨浏览器支持

我知(zhi)道(dao)在你(ni)使(shi)(shi)用这个(ge)新(xin)属性(xing)之前,你(ni)会想知(zhi)道(dao)哪些浏(liu)览(lan)器(qi)支持(chi)(chi)它以(yi)及什么(me)时候可以(yi)开始使(shi)(shi)用它。好(hao)消(xiao)息是它在所有现代(dai)浏(liu)览(lan)器(qi)中得到了很好(hao)的(de)支持(chi)(chi)。任何支持(chi)(chi)HTML的(de)东西(xi)都可以(yi)访问数据属性(xing)。如果(guo)您正(zheng)在使(shi)(shi)用该(gai)属性(xing)进行(xing)样(yang)式设置以(yi)及访问数据(请谨慎使(shi)(shi)用),那么(me)浏(liu)览(lan)器(qi)将需要支持(chi)(chi)CSS3选择器(qi)。

更好的消息(xi)是(shi),所有(you)浏览器(甚至(zhi)是(shi)IE7)都允(yun)许你在元素上使(shi)用(yong)data- *属性,如(ru)果你使(shi)用(yong)的是(shi)jQuery 1.4或更高版本,那么你可以使(shi)用(yong)jQuery的数(shu)据(ju)(ju)对象访(fang)问(wen)数(shu)据(ju)(ju)。但是(shi),如(ru)果您只是(shi)使(shi)用(yong)JavaScript,则必须(xu)使(shi)用(yong)JavaScript的“getAttribute”方(fang)法访(fang)问(wen)数(shu)据(ju)(ju)。

有(you)关数据(ju)集的完整列表支持,您(nin)可以查看canIuse.com。

结论

随着网站和(he)(he)网络应用(yong)程序(xu)变得越(yue)来(lai)越(yue)复(fu)杂并开始(shi)保存更(geng)多信息(xi)和(he)(he)数据,这个新属性绝对是工(gong)具(ju)箱的(de)一(yi)个受欢迎(ying)的(de)补充。我(wo)现(xian)在已经在很多现(xian)实世界的(de)例子中使(shi)用(yong)它,并且发(fa)现(xian)它是一(yi)种非(fei)常有(you)用(yong)的(de)方法来(lai)提供响应更(geng)快(kuai)(更(geng)快(kuai)速)的(de)网站,因为否(fou)则必须(xu)从手机(ji)购(gou)彩器中提取的(de)数据现(xian)在可以在标(biao)记并在必要时(shi)使(shi)用(yong)。

总而言之(zhi),如果您坚持以(yi)下(xia)三个规则,那(nei)么您可以(yi)确保以(yi)最有(you)效(xiao)和语义(yi)的方式使用新(xin)属性。

  1. 仅用(yong)于您(nin)网(wang)站(zhan)(zhan)/应用(yong)的内部使用(yong)。例(li)如,它不(bu)应该在(zai)XML / RSS提要(yao)中用(yong)于外部网(wang)站(zhan)(zhan)或应用(yong)程(cheng)序。

  2. 不要仅用于CSS样(yang)式。

  3. 不要使用它来替换(huan)更(geng)具(ju)语义或适当性(xing)的现有属性(xing)或元(yuan)素(su)。

既然您(nin)已(yi)经对HTML5数据(ju)属性及其使(shi)用方式有了(le)更(geng)深(shen)入的了(le)解,我建议您(nin)立(li)即开始在手机(ji)购彩中实现它。

杭(hang)州做网站你(ni)(ni)有(you)没有(you)在(zai)任(ren)何现(xian)实世(shi)界的例子中使用(yong)它(ta)?你(ni)(ni)用(yong)过什么场景?它(ta)是节省您的时间还是您希望通过此属性扩展的任(ren)何内容?请在(zai)下面的评论中告诉(su)我。

关(guan)键词

最新案例

联系电话 400-6065-301

留言(yan)

手机购彩(www.angelakelso.com)手机购彩【488推荐】是为当前国内知名的游戏平台网站,是值得您信赖的专业彩票网站,聚集了十多种优秀的经典游戏。提供官方数据,实时开奖,有权威,有保障...