我想知道有什么选择器可用于这些数据属性的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"下面 所有元素与数据公司!=“公司”下面的“微软” 在其他情况下，是否可以使用其他选择器，如“包含，小于，大于，等等……”。
当前回答
纯/香草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):测试在MacOs High Sierra 10.13.3、Chrome 67.0.3396.99(64位)、Safari 11.0.3(13604.5.6)、Firefox 59.0.2(64位)上执行。下图是最快浏览器(Safari)的测试结果:
PureJS在Chrome上比jQuery快12%，在Firefox上快21%，在Safari上快25%。有趣的是，Chrome的操作速度为每秒18.9M, Firefox为每秒26M, Safari为每秒160.9M(!)。
所以赢家是PureJS，最快的浏览器是Safari(比Chrome快8倍以上!)
在这里您可以在您的机器上执行测试:https://jsperf.com/js-selectors-x
其他回答
纯/香草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):测试在MacOs High Sierra 10.13.3、Chrome 67.0.3396.99(64位)、Safari 11.0.3(13604.5.6)、Firefox 59.0.2(64位)上执行。下图是最快浏览器(Safari)的测试结果:
PureJS在Chrome上比jQuery快12%，在Firefox上快21%，在Safari上快25%。有趣的是，Chrome的操作速度为每秒18.9M, Firefox为每秒26M, Safari为每秒160.9M(!)。
所以赢家是PureJS，最快的浏览器是Safari(比Chrome快8倍以上!)
在这里您可以在您的机器上执行测试:https://jsperf.com/js-selectors-x
jsFiddle演示
jQuery提供了几个选择器(完整列表)，以便使您正在寻找的查询工作。为了解决你的问题“在其他情况下是否可以使用其他选择器，如“包含，小于，大于，等…”，你也可以使用包含，开始与结束，以查看这些html5数据属性。请参阅上面的完整列表，以便了解所有的选项。
上面已经介绍了基本的查询，使用John Hartsock的答案将是获得所有data-company元素的最佳选择，或者获得除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>
jQuery UI有一个:data()选择器，也可以使用。它似乎从1.7.0版本开始就存在了。
你可以这样使用它:
获取具有data-company属性的所有元素
var companyElements = $("ul:data(group) li:data(company)");
获取所有数据公司等于微软的元素
var microsoft = $("ul:data(group) li:data(company)")
.filter(function () {
return $(this).data("company") == "Microsoft";
});
获得所有数据公司不等于微软的元素
var notMicrosoft = $("ul:data(group) li:data(company)")
.filter(function () {
return $(this).data("company") != "Microsoft";
});
等等……
新的:data()选择器需要注意的一点是，必须通过代码设置数据值才能被选中。这意味着要实现上述功能，仅在HTML中定义数据是不够的。你必须先这样做:
$("li").first().data("company", "Microsoft");
对于可能使用$(…)的单页应用程序，这很好。数据(“datakey”，“value”)。
$("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选择器的信息
