> php教程 > php手册 > HTML5 自定义属性 data-* 和 jQuery.data 详解

HTML5 自定义属性 data-* 和 jQuery.data 详解

WBOY
풀어 주다: 2016-06-06 20:12:50
원래의
1295명이 탐색했습니다.

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存

html5 dataset新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写:
data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith)
这样,我们就很简单的为这首歌在span标签里直接内嵌了其专辑、艺术家和流派信息。

继续围观此文

  1. 无需插件实现 jQuery 平滑滚动
  2. jQuery Scroll (jQuery平滑滚动) 插件
  3. 用history api"偷换"浏览器历史记录
  4. jQuery hash 插件
  5. jQuery Background Position Animate (jQuery背景位置变换) 插件
  6. jQuery Color Animate (jQuery 颜色变换动画) 插件
  7. 不刷新改变URL: pushState + Ajax
  8. 加载 jQuery 的正确方式
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿