HTML5新增属性data-*

data-*自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状

书写实例

<div data-role="page"
data-last-value="43"
data-hidden="true"
data-options='{"name":"John"}'>
</div>

1. 定义:

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

2. 注意点:

data-* 属性包括两部分:

  • 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

data-*属性和jQuery交互

使用jQuery中的.data()函数取用data-*属性值

console.log($("div").data('lastValue'));  //输出的值为:43
console.log($("div").data('role')); //输出的值为:page

注意事项

  1. data-**属性名格式驼峰命名改写

  2. data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)

     演示:
    console.log($("div").data('lastValue')); //输出的值为:43
    $('div').data('lastValue',44); //设置data-last-value=44
    $('div')[2] //假设这是文档中的第3个div,我们输出这个dom
    //输出:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>

    HTML5新增属性data-*和js/jquery之间的交互的更多相关文章

    1. HTML5 学习总结(二)——HTML5新增属性与表单元素

      一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

    2. HTML5 学习笔记(二)——HTML5新增属性与表单元素

      目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

    3. HTML5学习总结——HTML5新增属性与表单元素

      一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

    4. HTML5新增属性

      [sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...

    5. HTML5新增属性学习笔记

      1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...

    6. HTML5 新增属性和废除属性

      删除的属性大多都是可以用CSS替代的一些样式属性 设置网页标题前面的小图标的大小:size <link rel="icon" href="demo_icon.gif ...

    7. HTML5新增标签与属性

      目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

    8. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

      大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

    9. HTML5新增表单验证

      HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...

    随机推荐

    1. angular JS中使用jquery datatable添加ng-click事件

      'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.show = function ( ...

    2. 一次花费了一两个小时的mysql问题排查

      晚上把博客迁了个服务器,新建用户的时候遇到问题了. 关于mysql的问题. 前置操作 建了两个用户,一个laravel,一个blog用户以及他们的同名数据库. 建好之后,命令行下面连接mysql服务, ...

    3. rabbitmq重装之后无法加入原有cluster的bug解析

      背景: 一台controller node,一台compute1节点 两台机器的host文件均已经进行hostname解析 两节点本已经加入了同一rabbitmq cluster 但controlle ...

    4. 我的学习之路_第三十四章_jsp

      jsp 在只有servlet时,输出页面内容比较麻烦(成本高,java代码中输出HTML标签),所以需要一种技术,主要是HTML页面的代码(HTML,css,js),可以嵌入java代码,来实现动态页 ...

    5. Python爬虫初学(三)—— 模拟登录知乎

      模拟登录知乎 这几天在研究模拟登录, 以知乎 - 与世界分享你的知识.经验和见解为例.实现过程遇到不少疑问,借鉴了知乎xchaoinfo的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...

    6. AdPlayBanner:功能丰富、一键式使用的图片轮播插件

      AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...

    7. NOIP 2000 提高组 题解

      NOIP2000 提高组 题解 No 1. 进制转换 https://www.rqnoj.cn/problem/295 水题 对于n和基数r, 每次用n mod r, 把余数按照逆序排列 注意 mod ...

    8. java中方法调用

      JAVA中方法的调用[基础] 一.调用本类中的方法 方法一.被调用方法声明为static ,可以在其他方法中直接调用.示例代码如下: public class HelloWord { /** * @p ...

    9. struts2相关简单介绍

      一 Struts2环境配置 1.准备jar包,核心jar包有: 2.创建Struts2项目并导入jar包 3.在Struts2项目中src下创建Struts.xml配置文件 4.在Web.xml文件中 ...

    10. python几种常见语法

      NO1.type自动匹配类型 name="zhangsan"age=18 print (type(name))#type自动匹配类型 print ("name:%s,ag ...