人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

下面的一个代码片段是一个有效的HTML5标记:

<div id="awesome" data-myid="3e4ae6c4e">Some awesome data</div> 

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性;有时候也可以通过方法 .attr(obj) 来获取元素的某个属性值。

举个例子,你可以用下面的写法读取 data-myid属性值:

var myid= jQuery("#awesome").data('myid');
console.log(myid);

你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:

<div id="awesome-json" data-awesome='{"game":"on"}'></div> 

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:

var gameStatus= jQuery("#awesome-json").data('awesome').game;
console.log(gameStatus);

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。

尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。

关于Jquery.Data()和HTML标签的data-*属性的更多相关文章

  1. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  2. Jquery.Data()和HTML标签的data-*属性

    Jquery.Data()和HTML标签的data-*属性 一.总结 一句话总结: 在页面中用到要用标签存数据还是用HTML标签的data-*属性,这样 不会破坏html本身的结构 1.使用HTML标 ...

  3. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  4. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  5. jquery在元素中存储数据:data()

    转自:http://www.php.cn/js-tutorial-405445.html 在元素中存储数据:data() 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html& ...

  6. jquery方法详解--bind(type, [data], fn)

    转自:http://www.zhufengpeixun.cn/jquery/bind_type_data_fn.html bind(type, [data], fn)  返回值::jQuery 概述 ...

  7. jquery.tagthis和jquery.autocomplete一起实现标签

    目的 jquery.tagthis:http://www.dangribbin.co/jquery-tag-this/demo/ 使用tagthis控件实现标签的输入提醒功能,每个标签具有id和tex ...

  8. jQuery输入框回车添加标签特效

    效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. jquery遍历集合&数组&标签

      jquery遍历集合&数组的两种方式 CreateTime--2017年4月24日08:31:49Author:Marydon 方法一: $(function(){ $("inp ...

  10. jQuery --- 利用a标签的download属性下载文件!

    最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...

随机推荐

  1. 符合搜索引擎SEO规则的HTML代码

    实话说,部落在有时候,也经常会修改一下自己的主题,当然,很多时候,对自己修改过后的主题,会通过查看源代码的方式,来查看自己HTML代码,很多时候,也没有去刻意对代码进行符合搜索引擎SEO规则的优化,而 ...

  2. Extjs打开window窗口自动加载html网页

    Window inherits the autoLoad config option from Panel. Note that I included all config options below ...

  3. 2014年Facebook的开源成就

    2014是Facebook开源硕果丰硕的一年,其开源项目经理詹姆斯·皮尔斯(James Pearce)连续12天发布开源博客文章展示全年该社交网站在此领域取得的成就. 皮尔斯公布的成就包括以下内容: ...

  4. ubuntu 查本机 ip地址的命令是什么, 详细信息的?

    使用ifconfig命令即可.你一敲进去都出来了

  5. 0x80072f8a未指定的错误

    问题: 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2.exe提示:0x80072f8a未指定的错误 解决方法: 修改IE选项,取消选项 “检查服务器证书是否已 ...

  6. keil 51启动代码

    Startup code:启动代码. 在Keil中,启动代码在复位目标系统后立即被执行.启动代码主要实现以下功能: (1) 清除内部数据存储器 (2) 清除外部数据存储器 (3) 清除外部页存储器 ( ...

  7. (转载)Linux定时任务cron配置

    (转载)http://blog.csdn.net/jbgtwang/article/details/7995801 实现linux定时任务有:cron.anacron.at等,这里主要介绍cron服务 ...

  8. 数学 ZJOI 2012 数列

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; ; st ...

  9. bzoj 2324 [ZJOI2011]营救皮卡丘(floyd,费用流)

    2324: [ZJOI2011]营救皮卡丘 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1777  Solved: 712[Submit][Stat ...

  10. 纠结的CLI C++与Native C++的交互

    最近在写点东西,涉及到了CLR C++与Native C++的互相调用的问题,结果...........纠结啊. 交互原型 交互原型是这样的: void* avio_alloc_context( un ...