请问大神，HTML中div里有data-index="6" 是什么意思 谢谢

您好，这是HTML5的新功能自定义属性，意思是获取编号为“6”的自定义属性

HTML5 增加了一项新功能是 自定义数据属性 ，也就是  data- 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置需要的自定义属性，进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。

下面是来自developdrive的使用攻略译文

1、创建HTML5文件：

如果你还没想好要使用哪一个，可以复制下面的代码：

在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。

2、创建元素：

首先，添加一些简单的内容和自定义属性以及ID等元素，以便我们能够识别JavaScript示例。

正如你所看到的那样，自定义属性的形式为：“data-”，在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果你想验证网页是否有效可才采用这种方法。

当然，项目细节部分决定了自定义属性对你是否有用，以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。

自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。

3、添加测试按钮

在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：

获取属性：

在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是我们要做的第一步。在页面的head脚本区域添加以下函数：

这里，我们为示例增加了alert 值，当然你也可以根据自身需求在脚本中添加。

4、获取数据：

你可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。

从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。

请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-product-category” 变成“productCategory”)。

5、其他模块、函数

我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。

你也可以使用DOM方法或者数据集来删除某个属性：

结束语：

在HTML5中实现自定义属性技术上并不是很复杂，真正困难的是选择使用的方法是否适用于你的项目；如果适用，该如何使其更有效？请记住，现在启用数据集方法作为页面功能还为时尚早，毕竟很多浏览器暂不支持此功能。

使用data方法可以避免在DOM中存储数据，有些前端开发者喜欢使用HTML的属性来存储数据：

$('selector')attr('alt', 'data being stored');

//之后可以这样读取数据:

$('selector')attr('alt');

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据。

$('selector')data('参数名', '要存储的数据');

//之后这样取得数据:

$('selector')data('参数');

这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解。

这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:

HTML部分:

<form id="testform">

<input type="text" class="clear" value="Always cleared" />

<input type="text" class="clear once" value="Cleared only once" />

<input type="text" value="Normal text" />

</form>

JavaSript部分：

$(function() {

//取出有clear类的input域

//(注: "clear once" 是两个class clear 和 once)

$('#testform inputclear')each(function(){

//使用data方法存储数据

$(this)data( "txt", $trim($(this)val()) );

})focus(function(){

// 获得焦点时判断域内的值是否和默认值相同，如果相同则清空

if ( $trim($(this)val()) === $(this)data("txt") ) {

$(this)val("");

}

})blur(function(){

// 为有class clear的域添加blur时间来恢复默认值

// 但如果class是once则忽略

if ( $trim($(this)val()) === "" && !$(this)hasClass("once") ) {

//Restore saved data

$(this)val( $(this)data("txt") );

}

});

});

查看Demo

以上就是关于请问大神，HTML中div里有data-index="6" 是什么意思 谢谢全部的内容，包括:请问大神，HTML中div里有data-index="6" 是什么意思 谢谢、jquery data 方法 读取html事先写入的数据问题、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！