我想知道哪些选择器可用于 HTML5 附带的这些数据属性。
以这段HTML为例：
<ul data-group="Companies">
<li data-company="Microsoft"></li>
<li data-company="Google"></li>
<li data-company ="Facebook"></li>
</ul>
是否有选择器可以获取：
data-company="Microsoft"下方"Companies"data-company!="Microsoft"下方"Companies"$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"
$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"
查看jQuery Selectors :contains 是一个选择器
这是关于:contains 选择器的信息
jQuery UI有一个也可以使用的:data()选择器。它似乎自1.7.0 版以来一直存在。
你可以这样使用它：
获取具有data-company属性的所有元素
var companyElements = $("ul:data(group) li:data(company)");
获取data-company等于的所有元素Microsoft
var microsoft = $("ul:data(group) li:data(company)")
.filter(function () {
return $(this).data("company") == "Microsoft";
});
获取data-company不等于的所有元素Microsoft
var notMicrosoft = $("ul:data(group) li:data(company)")
.filter(function () {
return $(this).data("company") != "Microsoft";
});
等等...
新:data()选择器的一个警告是您必须通过代码设置data值才能选择它。这意味着要使上述工作正常，在 HTML 中定义是不够的。你必须首先这样做：data
$("li").first().data("company", "Microsoft");
这适用于您可能以$(...).data("datakey", "value")这种或类似方式使用的单页应用程序。
jQuery 提供了几个选择器（完整列表），以使您正在寻找的查询工作。解决您的问题“在其他情况下是否可以使用其他选择器，如“包含、小于、大于等......”。您还可以使用包含、开头和结尾来查看这些 html5 数据属性。查看上面的完整列表以查看您的所有选项。
上面已经介绍了基本查询，使用John Hartsock的答案将是获取每个数据公司元素或获取除 Microsoft（或任何其他版本的:not）之外的每个元素的最佳选择。
为了将其扩展到您正在寻找的其他点，我们可以使用多个元选择器。首先，如果您要进行多个查询，最好缓存父选择。
var group = $('ul[data-group="Companies"]');
接下来，我们可以在这个集合中寻找以 G 开头的公司
var google = $('[data-company^="G"]',group);//google
或者可能包含“软”这个词的公司
var microsoft = $('[data-company*="soft"]',group);//microsoft
也可以获取数据属性结尾匹配的元素
var facebook = $('[data-company$="book"]',group);//facebook
//stored selector
var group = $('ul[data-group="Companies"]');
//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');
//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');
//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
<li data-company="Microsoft">Microsoft</li>
<li data-company="Google">Google</li>
<li data-company ="Facebook">Facebook</li>
</ul>纯/原版 JS 解决方案（此处的工作示例）
// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']");
// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])");
在querySelectorAll 中，您必须使用有效的CSS 选择器（当前为Level3）
jQuery 和 Pure JS 的速度测试(2018.06.29)：在 Chrome 67.0.3396.99（64 位）、Safari 11.0.3 (13604.5.6)、Firefox 59.0.2 (64) 上的 MacOs High Sierra 10.13.3 上进行测试-少量）。下面的屏幕截图显示了最快浏览器 (Safari) 的结果：
PureJS 在 Chrome 上比 jQuery 快 12%，在 Firefox 上快 21%，在 Safari 上快 25%。有趣的是，Chrome 的速度为每秒 1890 万次操作，Firefox 26M，Safari 160.9M（！）。
所以赢家是 PureJS，最快的浏览器是Safari（比 Chrome 快 8 倍以上！）
在这里你可以在你的机器上进行测试：https : //jsperf.com/js-selectors-x