当前位置: 首页 > 面试题库 >

jQuery获取带有连字符和区分大小写的HTML 5数据属性

胡俊美
2023-03-14
问题内容

如何使用jquery获取数据属性.data()?在哪种情况下html5data-*属性会转换为小写字母和驼峰字母?使用自定义属性存储数据时应遵循的所有主要规则是什么?

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

问题答案:

HTML5允许我们创建自己的自定义属性来存储数据。可以将自定义属性称为任何我们喜欢的名称,例如变量名,但是它们必须以单词“
data”开头,单词之间用短划线隔开。您可以将“ foo”,“ bar”和“ foo bar”数据属性添加到这样的输入中:

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

jQuery的.data()方法将使您能够访问data-*属性。

使用jQuery 1.4及更高版本(包括1.4版),数据属性不区分大小写,因此:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

将可以使用

$('.myButton').data('productId');

jQuery 1.5和1.6

但是,jQuery 1.5和1.6的更改意味着数据属性现在被强制转换为小写,因此:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

只能通过访问

$('.myButton').data('productid');

任何data-*属性都将成为元素的数据集对象的属性。新属性名称的派生如下:

  • 属性名称将转换为所有小写字母。
  • data-前缀从属性名称剥离。
  • 所有连字符也将从属性名称中删除。
  • 其余字符将转换为CamelCase。在步骤3中删除的连字符后紧跟的字符变为大写。

请注意,原始属性名称data-product- idproductId在数据集对象中转换为。命名data-*属性时必须考虑名称转换过程。由于属性名称会转换为小写,因此最好避免使用大写字母。以下示例显示了几个属性名称如何转换为数据集属性。

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

注意:

  • 自定义数据属性通常用于存储辅助/简化JavaScript代码的元数据。
  • 元素可以具有任意数量的自定义数据属性。
  • 仅当不存在更合适的元素或属性时才应使用自定义数据属性。例如,您不应在图像上创建自定义的“文本描述”属性。现有alt属性是一个更好的选择。
  • HTML5规范明确规定data-*了第三方应用程序不应使用属性。这意味着在准备搜索结果时,诸如搜索引擎之类的程序不应依赖自定义数据属性。

在HTML5中实现自定义属性本身在技术上并不复杂,但是真正的困难在于选择是否适合在自己的项目中使用它们,以及如何有效地进行处理。最后,请记住,将数据集方法用于页面所依赖的功能还为时过早,因此请确保为不支持的浏览器提供替代方法。



 类似资料:
  • 需要制作一个密码程序,用户在开始时设置密码,在程序停止前可以输入密码3次。该程序不能区分大小写。 程序按预期打印,但不区分大小写

  • 问题内容: 我正在尝试提出一个要求区分大小写的结果的请求。 例如在我的数据库中 该请求是 但我有3行作为结果,我只想要abcdef 我试图找到一个解决方案 但是我有这个错误: 未知归类:’Latin1_General_CS_AS’{“成功”:false,“错误”:“#1273-未知归类:’Latin1_General_CS_AS’”} 谢谢 问题答案: 感谢您的帮助,我找到了不是latin1 ut

  • 根据这个答案,我尝试编写代码: pojo: 内部控制器: 网状物xml配置: 过滤器: 在debug中,我看到filter方法调用,但我无法实现case-insentive-get-parameters映射。 例如可以工作,但是-不

  • 问题内容: 我有一个Lucene索引,该索引当前区分大小写。我想添加的 选项 有不区分大小写作为后备的。这意味着与案例匹配的结果将获得更大的权重,并且将首先出现。例如,如果结果数限制为10,并且有10个匹配项符合我的情况,那就足够了。如果仅找到7个结果,则可以从不区分大小写的搜索中再添加3个结果。 我的案子实际上更复杂,因为我有不同重量的物品。理想情况下,匹配“错误”的表壳会增加一些重量。不用说,

  • 对于报告(0.1%的所有查询),我需要返回一个所有可能类别的列表,区分大小写! 考虑以下文件: 运行以下查询: 返回: 是否有方法返回区分大小写的类别(存储在文档中)?我对此查询结果中的感兴趣。 Elasticsearch论坛中的问题 谢谢,伊泰