数据(“键”，值）方法是否设置数据属性

Does the data("key", value) method set data- attributes?

本文关键字：方法 是否 设置 数据属性 数据      更新时间：2023-09-26

如果存在 jQuery $("..").data("key", value) 方法会设置 data-key 属性吗？

Adam Freeman的Pro jQuery指出它确实如此：

提示 数据方法在以下情况下考虑数据属性 也设置值。当您指定密钥（例如 [原文如此] 产品）时， 数据方法检查是否有对应的HTML5数据 属性，例如数据产品。如果有，那么值你 指定 分配给属性。如果不是，则数据是 由jQuery内部存储。

但我认为它没有，我运行的测试暗示它没有。 （我检查了勘误表部分 - 什么都没有）

下面是完整的代码，但缺点是当我通过调用 attr 方法设置 data-name 属性时，属性值会发生变化，可以在 chrome 元素选项卡中看到，并检索到 newValue 中。 当我使用 data 方法设置它时，这两个条件都不满足;似乎使用 data() 总是在内部设置值，而不是在属性上设置值，即使存在属性也是如此。

不幸的是，文档唯一提到html5数据属性是在数据方法的部分中，它只接受一个键，并返回伴随值;data("key", value)的描述似乎根本没有提到html5数据属性。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var oldValue = $("#d").data("name");
            alert("old value " + oldValue);
            $("#d").data("name", "Adam");
            //$("#d").attr("data-name", "Adam");
            var newValue = $("#d").attr("data-name");
            alert("new value " + newValue);
        });
    </script>
</head>
<body>
    <div id="d" data-name="none"></div>
</body>
</html>

我认为亚当·弗里曼的描述是不正确的，或者至少不完全准确。

根据jQuery文档：

从jQuery 1.4.3开始，HTML 5数据属性将自动 拉入jQuery的数据对象。

这意味着 jQuery 将这些属性拉取到它自己的内部表示中，而不是覆盖实际属性中的值。

快速浏览代码会发现相同的情况。

根据 jQuery 的 .data（） 方法文档：

请注意，此方法目前不提供跨平台 支持在 XML 文档上设置数据，就像 Internet Explorer 所做的那样 不允许通过 Expando 属性附加数据。

如果它在那里并且不会抛出错误，它似乎会使用该data=。

自己看看：

function dataAttr( elem, key, data ) {
    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {
        var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
        data = elem.getAttribute( name );
        if ( typeof data === "string" ) {
            try {
                data = data === "true" ? true :
                data === "false" ? false :
                data === "null" ? null :
                jQuery.isNumeric( data ) ? +data :
                    rbrace.test( data ) ? jQuery.parseJSON( data ) :
                    data;
            } catch( e ) {}
            // Make sure we set the data so it isn't changed later
            jQuery.data( elem, key, data );
        } else {
            data = undefined;
        }
    }
    return data;
}

jQuery的.data()函数根本不与HTML5 data-*属互，除了从中获取初始值;不过，我不完全确定何时完成 - 另一个答案表明它是在第一次调用 .data() 时完成的，这可能是正确的（这绝对是有道理的）。

使用

.attr() 为 data-* 属性指定新值不会修改 jQuery 存储的值以使用 .data() 进行访问。为了说明这一点，看看这个jsFiddle。如果检查<div>元素，然后单击按钮，您可以看到，虽然元素上的属性的值已更改，但两个console.log()调用输出相同的值。

相关文章：