Jquery 如何获取、设置和选择具有数据属性的元素？

我在数据属性方面遇到了一些问题，由于某种原因，我无法使任何东西正常工作，因此我一定是做错了什么：

设置：

这有区别吗

获取：

选择：

$('#element[data1 = 1]')

---

所有这些对我都不起作用，是我编的还是怎么编的？

您使用的是ID选择器，因此无需使用属性选择器，因为数据是一个属性，您使用的是

data

方法（不是attr方法）设置它。您不能使用属性选择器选择元素，如果仅当元素具有

data1===1

时才希望选择该元素，则可以使用

filter

方法：

(function($){
    $(function(){
       // ...
       $('#element').filter(function() {
          return this.dataset.data1 == 1
          // return $(this).data('data1') == 1
       })
    })
})(jQuery);

dataset

：允许在读写模式下访问元素上设置的所有自定义数据属性（data-*）。它是DOMString的映射，每个自定义数据属性对应一个条目

---

要立即在DOM中反映属性值，可以使用

.attr（）

在纯Javascript中，您可以尝试以下操作

var elem = document.getElementById('element');

elem.setAttribute('data-data1', '1'); // Set the attribute

elem.getAttribute('data-data1'); // Gets the attribute

---

所有答案都是正确的，但我想说的是其他人没有做过的事情。
jQuery

data

方法就像html5数据属性的getter，但setter不会更改data-*属性。
因此，如果手动添加数据（如注释中所述），则可以使用css属性选择器选择元素：

$('#element[data-data1=1]')  

但是，如果您通过jQuery添加（更改）了数据，则上述解决方案将不起作用。
下面是一个失败的例子：

var div = $('<div />').data('key','value');
alert(div.data('key') == div.attr('data-key'));// it will be false  

因此，为了克服这些问题，您需要使用html5数据集属性（通过jQuery的

attr

方法）作为getter和setter：

$('selector').attr('data-' + key, value);

或者，您可以使用自定义表达式过滤jQuery内部

数据

：

$.expr[':'].data = function(elem, index, m) {
    // Remove ":data(" and the trailing ")" from the match, as these parts aren't needed:
    m[0] = m[0].replace(/:data\(|\)$/g, '');
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
    // Retrieve data key:
    key = regex.exec( m[0] )[2],
    // Retrieve data value to test against:
    val = regex.exec( m[0] );
    if (val) {
        val = val[2];
    }
    // If a value was passed then we test for it, otherwise we test that the value evaluates to true:
    return val ? $(elem).data(key) == val : !!$(elem).data(key);
};

然后像这样使用它：

$('selector:data(key,value)')

更新 我知道这个线程已经有几年的历史了，但是因为它有一些活动，所以值得一提的是，使用

querySelector

domapi（不需要jQuery）来实现这一点非常简单：

document.querySelectorAll('[attribute=value]')

---

可能与..有关，我在这个虚构的例子中使用了一个id选择器，我实际上使用的是一个类选择器。我现在会检查过滤函数，谢谢你的帮助。这就是我的问题的部分来源。我想我实际上在寻找的只是使用属性而不是数据，这样我就没有这个问题了，谢谢gion！谢谢gion，这个答案非常完整，涵盖了所有内容。Hi@gion_13过滤方法对我来说很有效，但我似乎无法让自定义表达式发挥作用。可能是因为jQuery的更改？您介意看一下吗？显然，在jQuery 1.7.2之后，为m返回的值与gion_13编写上述自定义表达式时的值不同。这是一个至少可以工作到jQuery 2.1.3的版本，我认为使用attr（）对我来说是最好的方法，谢谢它现在可以工作了。

// replace key & value with own strings
$('selector').filter(function(i, el){
    return $(this).data('key') == 'value';
});

$('selector').attr('data-' + key, value);

$.expr[':'].data = function(elem, index, m) {
    // Remove ":data(" and the trailing ")" from the match, as these parts aren't needed:
    m[0] = m[0].replace(/:data\(|\)$/g, '');
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
    // Retrieve data key:
    key = regex.exec( m[0] )[2],
    // Retrieve data value to test against:
    val = regex.exec( m[0] );
    if (val) {
        val = val[2];
    }
    // If a value was passed then we test for it, otherwise we test that the value evaluates to true:
    return val ? $(elem).data(key) == val : !!$(elem).data(key);
};

$('selector:data(key,value)')

document.querySelectorAll('[attribute=value]')