jQuery向JavaScript DOM对象添加新属性

这里有两个代码块，一个是JavaSript，第二个是jQuery。在每段代码的末尾，我将向JavaScript对象div添加新属性（x和y）

但是在第一个示例中，属性是用JavaScript保存的，但是jQuery似乎没有按预期工作

问题：是否有任何特定的方法向JavaScriptDOM对象添加新属性

JavaScript

  init = function() {
                var puzzleArea = document.getElementById('puzzlearea');
                var divs = puzzleArea.getElementsByTagName("div");

                // initialize each piece
                for (var i = 0; i < divs.length; i++) {
                    var div = divs[i];

                    // calculate x and y for this piece
                    var x = ((i % 4) * 100);
                    var y = (Math.floor(i / 4) * 100);

                    // set basic style and background
                    div.className = "puzzlepiece";
                    div.style.left = x + 'px';
                    div.style.top = y + 'px';
                    div.style.backgroundImage = 'url("background.jpg")';
                    div.style.backgroundPosition = -x + 'px ' + (-y) + 'px';

                    // store x and y for later
                    div.x = x;
                    div.y = y;
                }
            };

---

将属性添加到jquery对象时，它不会添加到DOM元素。它只是被添加到对象中，然后随对象一起销毁。您可以使用jquery的数据api将值放在缓存中

    $(this).data('x', x); //or do this.x = x;
    $(this).data('y', y); //or do this.y = y

或者干脆另存为

    $(this).data('coords', {"x":x, "y": y});

并使用getter检索：

    var coords = $(this).data('coords');

---

将属性添加到jquery对象时，它不会添加到DOM元素。它只是被添加到对象中，然后随对象一起销毁。您可以使用jquery的数据api将值放在缓存中

    $(this).data('x', x); //or do this.x = x;
    $(this).data('y', y); //or do this.y = y

或者干脆另存为

    $(this).data('coords', {"x":x, "y": y});

并使用getter检索：

    var coords = $(this).data('coords');

---

要使用jQuery执行相同的操作，您可以使用

prop

方法：

$(this).prop('x', x);
$(this).prop('y', y);

---

要使用jQuery执行相同的操作，您可以使用

prop

方法：

$(this).prop('x', x);
$(this).prop('y', y);

---

我试过这个，但没有达到预期的效果。prop（）方法看起来不错如果

div.x=x

对您有效，那么

这个.x

也应该有效。此外，我也不确定通过向元素添加属性而不是元素本身的属性来污染元素是否是一个好主意。（我不确定，但可能会导致内存泄漏）。最好的方法是使用

data-*

属性，根据我的说法，它也是合法有效的。我尝试了这个，但没有给出预期的结果。prop（）方法看起来不错如果

div.x=x

对您有效，那么

这个.x

也应该有效。此外，我也不确定通过向元素添加属性而不是元素本身的属性来污染元素是否是一个好主意。（我不确定，但可能会导致内存泄漏）。最好的方法是根据我的要求使用

数据-*

属性，这也是合法的。