Question

jQuery $("..").data("key", value)方法是否会设置数据键属性（如果存在）？

提示数据方法在考虑时将数据属性考虑在内设定值也是如此。当你指定一个密钥，例如[sic]产品时，数据方法检查是否有相应的HTML5数据属性，例如数据产品。如果有，那么你的价值指定分配给属性。如果没有，则数据为由jQuery内部存储。

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

完整代码如下所示，但缺点是当我通过调用attr方法设置data-name属性时，属性值会更改，并且可以在chrome elements选项卡中看到，并检索到newValue。当我使用数据方法设置它时，这些条件都不满足;似乎使用data()始终在内部设置值，从不在属性上设置值，即使存在一个值。

不幸的是，docs' only mention of html5 data-attributes位于数据方法的只带一个键的部分，并返回伴随值; 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>

Answer 1

我认为Adam Freeman的描述不正确，或者至少不完全准确。

根据jQuery文档：

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

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

快速阅读代码表明了同样的原因。

Answer 2

根据jQuery's .data() method documentation：

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

Answer 3

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

Take a look for yourself:

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;
}

Answer 4

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

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

数据（“key”，value）方法是否设置了数据属性？

4 个答案: