将Javascript对象绑定到HTML元素

我只想和大家分享一个经验。所以我的问题是，我遇到了将javascript后端对象绑定到HTML前端元素的问题。现在，我在google上搜索并阅读了一些关于这个问题的stackoverflow文章，很多帖子都回答了这个问题，但是在我的第一次尝试中我没有成功，因为我不知道jQuery的对象创建方法。我的问题是，我想在存储数据的范围之外检索存储的数据，而jQuery总是在我编写jQuery'selectorID'时返回一个新的对象引用。例如：

var ref1 = $('#myID');
var ref2 = $('#myID');

if(ref1 == ref2)
{
   alert(true);
}
else
{
   alert(false);
}

将始终警告false。然而，用javascript的内置函数替换jQuery方法，我们将得到相同的引用！因此，以下代码将始终警告true

var ref1 = document.getElementById("myID");
var ref2 = document.getElementById("myID");

if(ref1 == ref2)
{
   alert(true);
}
else
{
   alert(false);
}

我的故事有点鼓舞人心，如果您想将javascript对象全局绑定到HTML元素，并考虑使用jQuery的数据方法，请将数据存储在javascript内置函数返回的引用上。这样，无论您在何处使用getElementByID检索引用，您都将获得相同的引用，并且可以使用jQuery的数据方法从中获取数据

我的问题是:

我的思维逻辑正常吗？ 有没有更好的方法将javascript对象全局绑定到HTML元素？

---

我是这样做的

var ref1 = $('a');
var ref2 = $('div');

var equal = ref1.length === ref2.length;
if (equal) {
    $.each(ref1, function(i) {
        equal = equal && ref1[i] === ref2[i];

        if (!equal) {
            return false;
        }
    });
}

if (equal) {
    alert(true);
} else {
    alert(false);
}

我认为jQuery的实例是唯一的，所以您可以比较它的匹配项，当您引用一个ID时，它应该只是一个元素

你可以这样做：

var ref1 = $('#myID')[0];
var ref2 = $('#myID')[0];

---

我深入研究了jQuery的源代码，找到了jQuery的构造函数。详情如下:

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}

无论何时使用ref2=$'myID'检索相应的jQuery元素，jQuery都将为您创建一个新对象。因此==将返回false，因为这两个元素与js对象引擎完全不同

---

似乎getElementById方法更适合您的需要。但我不知道js引擎如何执行其getElementById方法。

无论您提到的代码不起作用的原因是什么，这显然不是jQuery为每个查询提供了一个新集合的事实。给定HTML：

富吧 以下Javascript：

var$ref1=$'somediv'； var$ref2=$'somediv'； console.log$ref1:，$ref1； 日志$ref2:，$ref2； //比较集合/引用 console.log$ref1==$ref2:，$ref1==$ref2；//=>错误的 console.log$ref1===$ref2，$ref1===$ref2；//=>错误的 //比较引用的DOM元素本身 console.log$ref1[0]==$ref2[0]：，$ref1[0]==$ref2[0]；//=>符合事实的 console.log$ref1[0]===$ref2[0]，$ref1[0]===$ref2[0]；//=>符合事实的 $ref1.data'somedata'，'somedata'； console.log“$ref1->somedata:”，$ref1.data“somedata”；//=>一些数据 console.log“$ref2->somedata:”，$ref2.data“somedata”；//=>一些数据

---

你的逻辑显然是错误的。虽然对$的多次调用返回不同的选择器对象，但jQuery方法通常对所选对象本身进行操作。因此，对.data的调用将始终在使用getElementById获得的同一DOM元素上运行。正如您可以通过实际尝试而不是调查引用相等性来确定的那样。除非OP需要比较元素的标识，否则没有理由不使用jQuery。我不相信如何比较jQuery对象的标识是OP的问题，只是他做的一个观察。正如我在其他地方评论的那样，如何比较jQuery对象的标识似乎不是OP问题的重点我从来没有说过jQuery会为同一查询返回一个新集合，我说的是jQuery会从返回内容的角度返回对同一对象的新引用！另外，我想做的是在对那些DOM的引用上存储一些数据elements@Fazi您的问题是将javascript后端对象绑定到HTML前端元素。数据将任意对象绑定到DOM元素。当我说jQuery，即函数$返回DOM元素的集合时，这是因为它就是这样做的。代码中的ref1和ref1是DOM元素的智能数组，而不是引用。在jQuery中，通常可以将只有一个项的数组视为对所述项的引用，但它仍然是一个数组。@Fazi现在，如果要将对象绑定到所述数组/引用，只需使用自己的自定义属性，尽管最好以某种方式命名它们的名称，以避免破坏jQuery方法。如果要绑定到DOM元素，请使用.data，它实际上将绑定到DOM元素本身，而不是像我的代码示例所示的那样绑定到引用。如果你想做一些完全不同的事情，也许你应该发布一个问题，询问如何做到这一点——你从来没有提供过任何你想要完成的事情的例子。根据我的理解，与本文相关的是，Javascript中的所有变量都存储在一个堆中。因此，基本上，如果使用jQueryEvent的查询似乎返回相同的对象，则返回对全新对象的引用 对象例如，我的代码中的ref1和ref2是对不同智能阵列的引用。虽然，你是对的，在这个意义上，这是，真正的旁边我的职位的重点。

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
}