作者：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. web worker的用法及应用场景（转）

    首先简单介绍一下什么是web worker.我们都知道在浏览器中javascript的执行是单线程的,页面上的javascript在执行时会阻塞浏览器的响应,这非常影响用户体验,所以ajax应运而生了 ...

  2. mxonline实战10，课程列表页，课程详情页1

    对应github地址:第10天   一. 课程列表页   1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加

  3. Swift 函数提前返回

    简评:函数提前返回主要的好处是:将每个错误处理进行分离,审查代码时不需要考虑多种复杂异常,我们可以吧注意力集中在也业务逻辑中,调试代码时可以直接在异常中打断点. 提前返回 首先来看一下需要改进的代码示 ...

  4. python的copy模块

    python的copy模块 概念 Python中的赋值语句不复制对象,它们在目标和对象之间建立索引,这就是浅复制.对于一些对象或者集合,我们有时需要一个副本,以便可以更改一个副本中的值而不改变其原对象 ...

  5. 【性能测试】：关于测试F5负载均衡的问题

    在压测过程中,前置分发机的请求分发策略有多种,轮询,随机,DNS均衡,最小连接数等 问题出现的前提:因测试的一个系统对用户安全性校验较强,例如做交易之前,需要验证用户安全信息等 问题出现的现象:当lo ...

  6. C# TCPClient简单示例

    示例使用方法参考 示例 以下一个简单的异步事件TCP客户端实现 using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; usi ...

  7. Mac下使用Wine安装Notepad++

    下载: (链接: https://pan.baidu.com/s/1miOjLXY 密码: 2egg) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  8. Mac下安装eclipse（Mac 10.12/JDK/tomcat）

    1.到官网https://www.eclipse.org/downloads/eclipse-packages/下载安装包 2.安装 注意:安装ecllipse时一定要安装JDK先,最新版本的ecli ...

  9. html5+js+.Net的即时多人聊天

            今天看了下websocket的知识,了解到这是html5新增的特性,主要用于实时web的通信.之前客户端获取服务端的数据,是通过客户端发出请求,服务端进行响应的模式,或者通过ajax每 ...

  10. mono上部署web程序初体验

    早就想体验一下mono,但一直琐事缠身.难得有时间,便在网上一通狂搜mono相关的资料. 如果想使用Apache服务器,只能使用mod_mono的方式,这里有详细的介绍.这种方式有点繁琐,需要安装一大 ...