自定义数据属性是在HTML5中新加入的一个特性。简单来说,自定义数据属性规范规定任何以data-开头属性名并且赋值。自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进DOM中,对于整个DOM的布局和表现无任何影响,但是却可以方便操控整个网页的交互以及想要表达的效果。

比如我们想要统计一个页面玩家的排行榜,但是DOM页面的原生标签并没有提供这样的一个类似的属性。这时,就可以创建一个data-rank数据属性,保存玩家的分数,利用JS去控制属性的赋值以及逻辑分析,最终达到想要的效果。

对于数据属性的值的获取和设置,JQ提供了两种方法attr()和data()。

这两种方法,当只传递一个参数(标签的属性)的时候,可以获取该属性的值;

$(selector).attr(attribute)

当传递两个参数的时候,可以设置一个标签的属性以及值,

$(selector).attr(attribute,value)

对于原生的属性:

<a id="a_one" href="http://blog.csdn.net/it_surfer"></a>

<a id="a_two"></a>

则利用$("#a_one").attr("href")可以获取到id为a_one的a标签的连接地址:http://blog.csdn.net/it_surfer;

利用$("#a_two").attr("href","http://blog.csdn.net/it_surfer"),就可以设置id为a_two的a标签的连接地址为:http://blog.csdn.net/it_surfer

对于自定义数据属性:

<a id="a_one" href="http://blog.csdn.net/it_surfer" data-num=50></a>此处给a标签加了一个自定义数据属性data-num,用来统计访问改连接的次数

则可以利用$("#a_one").attr("data-num",80)来给id为a_one的a标签来给data-num赋值

也可以利用$("#a_one").data("num",80)来给id为a_one的a标签来给data-num赋值

同理,可以利用$("#a_one").attr("data-num")来获取id为a_one的a标签的data-num的值

也可以利用$("#a_one").data("num")获取id为a_one的a标签的data-num的值

注意attr()和data()方法引用的属性名的形式不同。

关于H5中自定义属性的设置和获取的更多相关文章

  1. 每日一问(如何在List中加入、设置、获取和删除其中的元素?)

    作为集合接口的一部分,对List接口所做的操作,最常见的就是增删查改了.这里总结下JAVA 中List接口及实现该接口的类实现这些操作的方法. 一.增加新的元素的方法 在Collection接口中定义 ...

  2. HTML5自定义属性的设置与获取

    <div id="box" aaa="bbb" data-info="hello"></div> <body& ...

  3. JQuery自定义属性的设置和获取

    Jquery操作自定义属性的方法,很简洁: $("#test").attr("test","aaa") // 设置 $("#tes ...

  4. JS自定义属性的设置与获取

    以前感觉用JQuery来设置自定义属性很方便,现在没有用JQuery,要用原生的JavaScript来操作自定义属性. Jquery操作自定义属性的方法,很简洁: $("#test" ...

  5. h5中不能用js来直接获取网络码和机器码的。

    h5中不能用js来获取mac的.是可以获取ip的.代码  <script>var fso = new ActiveXObject("Scripting.FileSystemObj ...

  6. H5对自定义属性的规定和添加获取自定义属性的方法

    H5对自定义属性的规定和添加获取自定义属性的方法 元素属性那么多,如何区分是自带的属性还是默认的属性呢? H5规定自带的属性有个data- 前缀,如data-index="1" & ...

  7. JS DOM属性,包括固有属性和自定义属性,以及属性获取、移除和设置

    属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取,自定义属性不行 <!DOCTYPE html> <ht ...

  8. 【转】分享前端开发中通过js设置/获取cookie的一组方法

    在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...

  9. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

随机推荐

  1. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  2. Python开发【第四章】:Python函数剖析

    一.Python函数剖析 1.函数的调用顺序 #!/usr/bin/env python # -*- coding:utf-8 -*- #-Author-Lian #函数错误的调用方式 def fun ...

  3. 开发不改bug?给你支个招

    在测试过程中,不免会遇到开发人员因为一些原因不想修改个别bug的情况.那一般遇到这种问题时,我们该如何去推进开发修改bug呢? 我们先来分析下到底会有哪些原因会导致开发不修改bug 1. 开发与测试对 ...

  4. soap ui 进行接口测试

    [前置条件] 1. 电脑上已安装soap UI 5.0 2. 电脑上已安装eclipse. JDK1.6.tomcat 3. eclipse已经成功的配置JDK1.6.tomcat [操作步骤] 1. ...

  5. 一些常见maven仓库

    <repositories> <repository> <id>spring-releases</id> <url>https://repo ...

  6. JQuery 表单校验插件 validate 使用纪录

    JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...

  7. git设置hooks 钩子

    github是可以设置hooks的,看:在设置webhooks & services,可在Just the push event.是设定向你的服务器发请求,然后再做相应的处理. https:/ ...

  8. jquery mobile界面数据刷新

    JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作. 为什么必须做refr ...

  9. python 清楚数组重复字符串元素

    l1 = ['bb','c','d','bb','c','a','a'] l2 = {}.fromkeys(l1).keys() print (l2)

  10. 将序列化成json格式的日期(毫秒数)转成日期格式

    <script> $(function () { loadInfo(); }) function loadInfo() { $.post("InfoList.ashx" ...