通过数据属性select元素
有一种简单而直接的方法来根据data属性select元素吗？ 例如，select具有值为22数据属性名为customerID所有锚点。
我有点犹豫是否使用rel或其他属性来存储这些信息，但是我发现根据存储在其中的数据来select元素要困难得多。
$('*[data-customerID="22"]');
你应该可以省略* ，但是如果我记得正确的话，取决于你正在使用哪个jQuery版本，这可能会给出错误的结果。
请注意，为了与Selectors API（ document.querySelector{,all} ）兼容， 在这种情况下 ，属性值（ 22 ）周围的引号不能省略 。
另外，如果您在jQuery脚本中使用了很多数据属性，则可能需要考虑使用HTML5自定义数据属性插件 。 这使您可以通过使用.dataAttr('foo')来编写更具可读性的代码，并在缩小后导致较小的文件大小（与使用.attr('data-foo') ）。
对于Google用户而言，希望获得更多有关使用数据属性进行select的一般规则：
$("[data-test]")将select仅具有数据属性的任何元素（不pipe属性的值）。 包含：
<div data-test=value>attributes with values</div> <div data-test>attributes without values</div>
$('[data-test~="foo"]')将select数据属性包含 foo任何元素，但不一定是确切的，例如：
<div data-test="foo">Exact Matches</div> <div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>
$('[data-test="the_exact_value"]')将select数据属性精确值为the_exact_value任何元素，例如：
<div data-test="the_exact_value">Exact Matches</div>
但不是
<div data-test="the_exact_value foo">This won't match</div>
使用$('[data-whatever="myvalue"]')将select任何具有html属性的东西，但在新的jQueries中，似乎如果使用$(...).data(...)来附加数据，使用一些神奇的浏览器thingy，不会影响html，因此不会被.find发现，如前面的答案所示 。
validation（testing1.7.2 +）（也见小提琴 ）:( 更新更完整）
var $container = $('<div><div id="item1"/><div id="item2"/></div>'); // add html attribute var $item1 = $('#item1').attr('data-generated', true); // add as data var $item2 = $('#item2').data('generated', true); // create item, add data attribute via jquery var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' }); $container.append($item3); // create item, "manually" add data attribute var $item4 = $('<div id="item4" data-generated="true">Item 4</div>'); $container.append($item4); // only returns $item1 and $item4 var $result = $container.find('[data-generated="true"]');
要select数据属性为data-customerID==22所有锚点，应该包含a以将search范围限制为仅限于该元素types。 在页面上有很多元素时，以大循环或高频率进行数据属性search可能会导致性能问题。
$('a[data-customerID="22"]');
我没有看到没有jQuery的JavaScript的答案。 希望它可以帮助别人。
var elements = document.querySelectorAll('[data-customerID="22"]'); elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>
通过jquery filter（）方法：
http://jsfiddle.net/9n4e1agn/1/
HTML：
<button data-id='1'>One</button> <button data-id='2'>Two</button>
JavaScript的：
$(function() { $('button').filter(function(){ return $(this).data("id") == 2}).css({background:'red'}); });
像这样的构造： $('[data-XXX=111]')在Safari 8.0中不起作用。
如果你这样设置数据属性： $('div').data('XXX', 111) ，它只有在你直接在DOM中设置数据属性时才会起作用： $('div').attr('data-XXX', 111) 。
我认为这是因为jQuery团队优化了垃圾收集器，以防止内存泄漏，并在每个更改数据属性上重buildDOM重操作。
为了在Chrome中工作，这个值不能有另外一对引号。
它只适用于，例如，像这样：
$('a[data-customerID=22]');
原生JS例子
获取元素的NodeList
var elem = document.querySelectorAll('[data-id="container"]')
html： <div data-id="container"></div>
获取第一个元素
var firstElem = document.querySelectorAll('[id="container"]')[0]
html： <div id="container"></div>
目标集合的节点然后select
document.getElementById('footer').querySelectorAll('[data-id="12"]')
HTML：
<div class="footer"> <div data-id="12"></div> </div>
获取多个ID
document.querySelectorAll('[data-section="12"],[data-selection="20"]')
HTML：
<div data-selection="20"></div> <div data-section="12"></div>
获取价值开始的项目
document.querySelectorAll('[href^="https://"]')
有时候需要根据元素是否以编程方式附加到数据项（也就是不通过dom属性）来过滤元素：
$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();
以上的作品，但不是很可读。 更好的方法是使用伪select器来testing这种事情：
$.expr[":"].hasData = $.expr.createPseudo(function (arg) { return function (domEl) { var $el = $(domEl); return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined"; }; });
现在我们可以将原始语句重构成stream畅可读的语句：
$el.filter(":hasData('foo-bar')").doSomething();
