作者：Zeropoint零点
来源：CSDN
原文：https://blog.csdn.net/qq_41648132/article/details/80364335
版权声明：本文为Zeropoint零点原创文章，转载请附上博文链接！

id是选择器data-id只是行内存放数据的一个标签，跟input里面的value作用是一样的同时在HTML5 中增加了一项新功能是 自定义数据属性 ，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。

<style type="text/css">
 div[data-id="something"]{
 background-color: yellow;
}
</style>
<body>
 <div data-id="something">hello world</div>
 <button>click me</button>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("button").on("click",function(){
   $("div").removeAttr("data-id");
   //鼠标单击时移除div的背景色
  })
 })
</script>

data-id 和 id 的区别的更多相关文章

  1. html元素中id和name的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...

  2. Android中@id与@+id区别

    Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值. id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@后 ...

  3. Android @id和@+id区别

    Android中的组件需要用一个int类型的id属性值来表示.id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等.如果在@后面使用“+”,表示当修改完某个布 ...

  4. Android查缺补漏（View篇）--布局文件中的“@+id”和“@id”有什么区别？

    Android布局文件中的"@+id"和"@id"有什么区别? +id表示为控件指定一个id(新增一个id),如: <cn.codingblock.vie ...

  5. html中元素的id和name的区别（2016-1-22）

    HTML中元素的Id和Name属性区别 一直以来一直以为在html中,name和id没什么区别,今天遇到一个坑才发现(PHP获取不到表单数据,原因:元素没有name,只定义了id),这两者差别还是很大 ...

  6. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  7. html中id name class的区别（转）

    HTML 中 id与name 区别 一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客户 ...

  8. javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...

  9. id和class的区别

    id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为 #main{width:20px;} ,使用class时用到的是 .main{width:20 ...

  10. Android中@id与@+id区别和sharedUserId属性详解

    Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值. id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@后 ...

随机推荐

  1. 读取Properties文件的六种方法

    1.使用java.util.Properties类的load()方法 示例: InputStream in = new BufferedInputStream(new FileInputStream( ...

  2. javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  3. Linux修改profile文件改错了，恢复的方法

    Linux修改profile文件改错了,恢复的方法在改profile的时候,改出问题了,除了cd以外的命令基本都不能用了,连vi都不能用了,上网查了下,用export PATH=/usr/bin:/u ...

  4. jee-oxygen版eclipse的安装与卸载 maven配置

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,是大部分JAVA编程学习者入门的编程工具.Eclipse 是开发java的一个工具,Eclipse需要JDK中的JRE支持才能启动,所 ...

  5. Hexo博客系列(一)-Windows系统配置Hexo v3.x个人博客环境

    [原文链接]:https://www.tecchen.xyz/blog-hexo-env-01.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...

  6. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  7. c#Filestream类（文件流）

    0.创建文件流几种方法: File.Open("a.txt",FileMode.Create,FileAccess.ReadWrite); File.OpenWrite(" ...

  8. 微信小程序授权流程(图)

    看图: 1. 前端H5调用JSSKD的方法  wx.login(), 2. 微信返回 临时登录凭证code 给前端H5 3. 将此Code给到开发者服务器 4. 服务器混同小程序的AppId 和 Ap ...

  9. jni使用javap查看java类方法签名

    在Jni开发中,需要回调给java层数据,因此使用java的方法签名是必不可少的. 快速定位java方法签名的方式: java方法签名由(函数参数列表)返回值组成. cmd运行:javap -s 字节 ...

  10. Jira 6.0.5的详细安装及汉化授权

    第一步:安装jdk-6u24-windows-i586.exe (1)下载到oracle官网下装安装 jdk-6u24-windows-i586.exe,http://www.oracle.com/t ...