4

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

Adam Freeman 的 Pro jQuery声明它确实：

提示data 方法在设置值时也会考虑数据属性。当您指定一个键时，例如 [sic] 产品，data 方法会检查是否存在相应的 HTML5 数据属性，例如 data-product。如果存在，则将您指定的值分配给该属性。如果不是，则数据由 jQuery 内部存储。

但我认为它没有，我运行的测试表明它没有。（我检查了勘误表部分——没有）

完整代码如下，但不足之处在于，当我通过调用该attr方法设置 data-name 属性时，属性值发生了变化，可以在 chrome 元素选项卡中看到，并检索到newValue. 当我用数据方法设置时，这两个条件都不满足；似乎 usingdata()总是在内部设置值，而不是在属性上，即使存在一个。

不幸的是，文档中唯一提到的 html5 数据属性是在 data 方法的部分中，它只接受一个键，并返回伴随值；的描述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>
4

4 回答 4

2

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

根据 jQuery 文档：

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

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

快速阅读代码表明了这一点。

于 2012-04-16T21:55:09.953 回答
1

根据jQuery 的 .data() 方法文档：

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

于 2012-04-16T21:55:28.960 回答
1

似乎它使用data=if 它存在并且不会引发错误。

看看你自己：

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;
}
于 2012-04-16T21:57:50.030 回答
1

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

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

于 2012-04-16T22:04:28.673 回答