在 jQuery 对象和纯 js 对象之间转换？答案

【问题标题】：Converting between a jQuery object and a pure js object?在 jQuery 对象和纯 js 对象之间转换？
【发布时间】：2013-10-20 19:55:03
【问题描述】：

$('#elementID')返回的对象和document.getElementById('elementID')返回的对象有什么区别？

此外，您如何轻松地从一种转换为另一种？例如：

$('a').each(function(){
    // How can I access 'this' as a pure javascript object instead of as a jQuery object?
});

这已经困扰了我一段时间了。我知道你不应该把两者混在一起，真的，但我只是想了解原理。

【问题讨论】：

只需将其传递给$ 构造函数：$(document.getElementById('id'))。要取出 DOM 对象，请使用 .get() 或 [0]。
你应该用清晰的例子来回答这个问题:)
@Aerovistae 作业？ :)
关于您的$.each 问题：this 在这种情况下将是一个常规的 DOM 节点，而不是一个 jquery 对象。
我可以插话并强调@bfavaretto 所说的话吗？ each 块内不需要转换。只需使用this 访问DOM 对象或使用$(this) 访问jQuery 对象。

标签： javascript jquery

【解决方案1】：

$('#elementID')返回的对象和document.getElementById('elementID')返回的对象有什么区别？

$('#elementID') 返回一个包含大量函数的对象，这些函数都对document.getElementById('elementID') 的结果进行操作。将 jQuery 对象想象成一个巨大的机器人，document.getElementById('elementID') 坐在其中。

您可以通过以下方式访问包装的 DOM 对象：

$('#elementID').get()
$('#elementID').get(0)
$('#elementID')[0]

如果选择器匹配的元素不止一个，您可以访问第二个元素，例如$elements.get(1) 或$elements[1]。

此外，您如何轻松地从一种转换为另一种？

要使用 jQuery 的便捷函数包装对象，只需将其传递给 $ 函数即可：

$(document.getElementById('foo'))
$(document.querySelectorAll('.foo:not(.bar)'))

反之，请使用.get() 或括号表示法。

在您的具体示例中，您不需要做任何特别的事情，因为this 实际上是一个普通的 DOM 对象。这就是为什么你经常看到回调中充斥着$(this)。

【讨论】：

我认为不需要这个答案的前两段。对我来说，OP 清楚地表明他理解 jQuery 对象是 DOM 节点的包装器。他只是想了解如何以及如何在它们之间进行转换。一个简单、直接的答案不仅对 OP 更好，而且对未来可能被重定向到这个答案的“重复问题”也更好。除此之外，很好的答案和非常完整的解释。
@slebetman OP（对我来说，非常清楚）在他的帖子正文中提出了两个问题。这个答案实际上引用（并随后回答）两者。我认为你的反对意见站不住脚。
@millimoose：前两段已被删除。最初的前两段解释说 jQuery 并不神奇，它是用 javascript 编写的，是 DOM 对象的包装器。我认为OP明白这一点。当前的前 2 段我可以接受。

【解决方案2】：

我使用以下代码创建了一个简单的 javascript 元素数组，但在某些情况下我发现我需要使用与 jQuery 对象相同的元素。然后我找到了以下解决方案。

var cboxes = document.getElementsByName('deletecheck');
var len = cboxes.length;
for (var i=0; i<len; i++) {
    if (cboxes[i].checked){
            jQuery(cboxes[i]).parent().parent().remove();
    }
}

【讨论】：

【解决方案3】：

Jquery 对象包含描述对象的属性和与该对象交互的方法（函数）

【讨论】：

【解决方案4】：

jquery 对象只是一个具有特殊功能的数组

// non-jquery -> jquery
var a = document.getElementById('some-link'); // one element
var $a = $(a);

// jquery -> non-jquery
a = $a[0]; // a jquery element holds all of its matches in the indices 0..(a.length) just like a  JS array

【讨论】：