- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
在你说有大量资源解释它之前,我要告诉你的是,我花了时间研究它,但仍然想知道一些东西:)
所以,我是网络开发的新手,在过去的几个月里,我在集成 HTML/CSS/JS
和一些 PHP
方面积累了很强的技能。然而,我用老派的“class”和“id”标签编写了我所有的标记、选择器等。现在我看到了更现代的风格,我看到很多网页使用数据标签。现在的问题是,这些标签是否可以以任何方式与"class"
和"id"
相关?如果是,那么它真正的核心优势是什么?我需要简单的例子来理解这个概念。是的,我知道它是一个自定义数据属性等等,但它比其他标签更有用的地方是什么?
非常感谢简单的例子和解释:)
最佳答案
我认为类和 ID 与 data-*
属性有不同的用途/目的。
例如,类有助于描述层次结构。某些类的成员获得某些状态和样式(来自 CSS)或不同的行为(例如来自 JavaScript)。 ID 类似,但它对一个组件是唯一的。因此,虽然它有时有助于描述元素的状态或样式,但它在针对 JavaScript 中的特定元素时也非常有用。
data-*
属性有很多用途。但它们存在的主要目的正如其名称所暗示的那样:保存有关元素的数据或信息。元素没有很多其他方法可以做到这一点。
来自 MDN :
for data that should be associated with a particular element but need not have any defined meaning
例如,假设您正在构建一个计算器应用程序。您有一个显示屏、一个键盘和按键。
每个键 都可以有类.key
,这有助于描述它的状态/样式。每个键也可以有一个 ID(例如 #divide
),但是您如何进一步分割这些键来描述它们?
嗯,数字键可以有 data-type="operand"
,加号、减号、减号等键可以有 data-type="operator"
。您可能会争辩说您可能不会使用类 .operand
和 .operator
,因为作为操作数或运算符并不是这些键的可变状态......相反,它是一个可区分的属性,不会像类那样进一步帮助描述键的状态。为什么要使用 data-type
?好吧,正如 MDN 所说,我们使用它来代替虚构的属性,因为 div.key
没有原生 HTML type
属性。
为什么这有用?那么,在您的 JavaScript 中,您可以通过执行例如 $([data-type="operand"]).on('click', doSomething)
来定位这些键。这准确地描述了元素,以及您选择该元素的原因。如果您要使用一个类甚至一个 ID,完全相同的事情是可能的,但我认为在这种情况下,data-*
属性有助于从状态中抽象出属性和行为。
关于javascript - HTML5 中数据标签的简单解释/示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30805428/
我在一个项目中工作,该项目需要 SQL 结果的最佳性能,并且希望优化查询,但经过反复试验后,我在 IN 方面遇到了一些问题。 -- THIS RETURNS NO RESULTS AT ALL. SE
在尝试创建一个实际上非常简单的 SQL 语句时,我发现自己迷失了方向。 我有一个包含 3 个表的数据库: 食谱 - 存储一些用于 cooking 的食谱名称 配料食谱 - 将配料与食谱链接 成分 -
我正在尝试理解 PHP 中的 Hebrev 函数。 https://php.net/manual/en/function.hebrevc.php 它说:“将逻辑希伯来语文本转换为视觉文本”。但我不明白
嗨,我在 Grid view 的 android 文档中发现了一段代码对于以下代码。 gridview.setOnItemClickListener(new OnItemClickListener()
谁能解释一下 InfiniBand 是什么?与以太网相比的主要区别是什么,这些差异如何使其比以太网更快? 在官方description从 mellanox 写到 Introduce InfiniBan
这个问题已经有答案了: How are java increment statements evaluated in complex expressions (1 个回答) 已关闭 8 年前。 我知道
我正在阅读 MySQL 教程,我遇到了这个: SELECT /*! SQL_NO_CACHE */ user FROM users; 为什么优化提示 SQL_NO_CACHE 包含在: /*!
我无法理解$(this),我做了一个剪刀石头布的版本,并应用了 jQuery 让用户在计算机上选择按钮选项。我希望有人能解释一下 $(this) 指的是什么,它是 btn-primary 吗?该函数在
我不是很确定 while(choice == 1 || choice ==2);谁能解释一下。我明白这一点 if(choice ==1) displayMonthly(rainfall); e
let flyRight = CABasicAnimation(keyPath: "position.x") flyRight.toValue = view.bounds.size.width/2 f
目录 解释:int型默认值为0 但我们尝试发现并不能通过: 原因: int的默认值为0,而Integer的默认值为null
我正在处理一个查询,自从一个 SSRS 服务器传输到另一个服务器后,它似乎没有按预期执行,并且 where 语句的一部分中出现了以下行 找出不同之处,或者至少从我能找到的地方来看。 where COA
我正在制作一个退回检测程序,读取退回邮件。我们的设置是发送电子邮件,在发送的邮件中添加一个 noreply@domain.tl。一些收件人不再存在,因此我们想要读取退回邮件,并检测它发送给谁。我已经崩
我有一个关于公式通过控制点弯曲的问题。 如您所知,HTML Canvas 有 quadraticCurveTo(x1, y1, x2, y2)与 x1 and x2作为控制点。 但是,当您尝试使用它绘
我有一个 Emakefile看起来像: %% -- %% %% -- {'/Users/user/projects/custom_test/trunk/*', [debug_info, {out
我有一个非常简单的问题。这不仅适用于 spray-json,而且我已经阅读了 argonaut 和 circe 的类似声明。所以请赐教。 在 spray-json 中,我遇到了 There is no
我正在为视频添加水印。我试图让水印与视频尺寸成比例。我已经使用 scale2ref 看到了十几个不同的答案,但没有解释实际发生了什么,所以我发现很难知道如何实现/更改配置以适应我的情况。 当前覆盖命令
因为我正在学习语言,所以我在玩 Haskell,我只是发现了一些我不理解的东西,我找不到解释。如果我尝试运行此代码: map (`div` 0) [1,2,3,4] 我得到一个除以 0 的异常,这是预
我正在寻找解决错误对象引用未设置到对象实例的步骤/指南。以及问题发生原因的解释。 我正在寻找更一般的解释,所以如果我收到错误,我应该采取什么步骤来查找问题。我经常看到有人提供特定代码段的帖子,而其他人
我最近想升级我的知识React ,所以我从组件生命周期方法开始。让我好奇的第一件事是这个componentWillReceiveProps .所以,文档说当组件接收新的(不一定是更新的) Prop 时
我是一名优秀的程序员,十分优秀!