作者：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. Redis-Java 交互的应用

    一.首先介绍一下Redis Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结构,例如hashes, lists, sets等,同时支持数据持久化.除此 ...

  2. Asp.net的生命周期应用之IHttpModule和IHttpHandler

    摘自:http://www.cnblogs.com/JimmyZhang/archive/2007/11/25/971878.html 从 Http 请求处理流程 一文的最后的一幅图中可以看到,在Ht ...

  3. vue-cli3预设preset记录

    这两天公司搭建新项目的时候发现vue-cli3有一个神奇的的东西:preset(预设).preset其实是你在create新vue项目的时候,生成的插件配置项预设,也就是你在项目中需要用到的插件安装成 ...

  4. Mac下开机启动rc.common不生效的问题

    经过测试在10.12.6下/etc/rc.common不生效,原因是已经被launchd守护进程所取代,虽然保留着这个文件,但是基本是不起作用的. 如果要开机启动请直接使用launchd进行操作. 同 ...

  5. HTML5创业的另一种可能

    当一种新的颠覆式技术出现,是投靠大平台还是坚持走独立的道路? HTML5(下称H5)火了.在多数人还没完全弄清楚什么是H5时,它已悄无声息地潜入移动端,并渐呈燎原之势火速席卷云寻觅云寻觅. 以前,H5 ...

  6. (转)aix非计算内存 占用过高 案例一则

    原文:http://www.talkwithtrend.com/Article/28621 两台小型机组成的RAC环境,在用topas查看资源使用情况时,发现一台机器的非计算内存占用过高: MEMOR ...

  7. Asp.Net Cache缓存技术学习

    本文参考自Fish Li的细说 ASP.NET Cache 及其高级用法 一.前言,相信大多数做网站开发的都知道缓存技术对于网站的重要性,它对于网站的性能优化起着至关重要的作用. 关于缓存的技术大致有 ...

  8. 创建自己的加密货币MNC——以太坊代币（二）

    创建一个基于以太坊平台的分红币MNC,根据持有的代币数量,进行分红的算法.github地址: https://github.com/lxr1907/MNC 1.使用以太坊根据比例换购token MNC ...

  9. 安装Ubunutu音频视频库

    sudo apt-get install ubuntu-restricted-extras

  10. WPF中使用TextBlock的Inlines属性来完成复杂的文字内容

    参考:http://blog.csdn.net/zhangjiyehandsom/article/details/5498845 1. 需求:要在一行内容中显示不同颜色以及粗细不一的字体, 解决办法: ...