包含冒号的属性选择器未找到任何元素答案

【问题标题】：Attribute selector containing a colon is not finding any elements包含冒号的属性选择器未找到任何元素
【发布时间】：2020-11-17 11:07:58
【问题描述】：

我有以下 HTML-Tags 并希望通过 jQuery 选择它们：

<div foo:bar="test"></div>
<span foo:bar="test2"></span>
<xxx foo:bar="test3"></xxx>

所以，我想选择所有具有foo:bar 属性的标签。

我尝试了以下操作：

$('[foo:bar]').addClass("fooBar");
// Error: Syntax error, unrecognized expression: [adv:sensorid]

我知道，正确的语法应该是 data-foo-bar，但我必须使用 foo:bar。

这在 jQuery 中是否可行？

如果有帮助的话，我什至可以使用 AngularJS。非常感谢！

【问题讨论】：

【解决方案1】：

这是可能的。您需要使用 \\ 转义任何特殊字符

$('[foo\\:bar]').addClass("fooBar");

使用任何元字符（例如 !"#$%&'()*+,./:;?@[]^`{|}~ ) 作为名称的文字部分，它必须用两个反斜杠转义：\\.例如，一个元素 id="foo.bar"，可以使用选择器$("#foo\\.bar")。

【讨论】：

【解决方案2】：

例如我们有 HTML：

<span id="item-1023293" pr:position="hr">Jhon</span>

我们需要按属性选择所有span元素。

所以选择器应该是这样的：

document.querySelectorAll('span[pr\\:position="hr"]')

【讨论】：