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

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

您好,这是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中实现自定义属性技术上并不是很复杂,真正困难的是选择使用的方法是否适用于你的项目;如果适用,该如何使其更有效?请记住,现在启用数据集方法作为页面功能还为时尚早,毕竟很多浏览器暂不支持此功能。

HTML5连接数据库分为以下几步:

预备知识:Web SQL Database,Html5环境下可以用Js执行CRUD的Web数据库组件。

核心方法如下:

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql:这个方法用于执行真实的SQL查询。

第一步:打开连接并创建数据库

var dataBase = openDatabase("student", "1.0", "student", 1024 * 1024, function () { })

if (!dataBase) {

alert("数据库创建失败!")

} else {

alert("数据库创建成功!")

}

第二步:创建数据表

this.createTable=function() {

dataBase.transaction( function(tx) {

tx.executeSql(

"create table if not exists stu (id REAL UNIQUE, name TEXT)",

[],

function(tx,result){ alert('创建stu表成功')},

function(tx, error){ alert('创建stu表失败:' + error.message)

})

})

}

第三步:执行增删改查

添加数据:

this.insert = function () {

dataBase.transaction(function (tx) {

tx.executeSql(

"insert into stu (id, name) values(?, ?)",

[id, '徐明祥'],

function () { alert('添加数据成功')},

function (tx, error) { alert('添加数据失败: ' + error.message)

} )

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6123068.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存