在jQuery对象和纯JS对象之间进行转换？

Question

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

另外，如何轻松地从一个对象转换为另一个对象？例如：

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

这件事困扰了我很长时间。我知道真的不应该混合使用两者，但我只是想理解原则。

- temporary_user_name

---

只需将其传递到 $ 构造函数中：$(document.getElementById('id'))。要将 DOM 对象取回，请使用 .get() 或 [0]。 - Blender

你应该把它变成一个带有清晰例子的答案 :) - temporary_user_name

@Aerovistae的作业？ :) - user2869113

关于你的$.each问题：在那种情况下，this将是一个普通的DOM节点，而不是jQuery对象。 - bfavaretto

我能插一句并强调@bfavaretto所说的吗？在each块内部没有必要进行转换。只需使用this来访问DOM对象或$(this)来访问jQuery对象即可。 - Ingo Bürk

Answer 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)的回调函数。

- Blender

---

我认为这个答案的前两段是不必要的。对我来说，OP 明显表明他理解 jQuery 对象是 DOM 节点的包装器。他只想知道如何在它们之间进行转换。一个简单、直接的答案不仅对 OP 更好，也对未来可能被重定向到这个答案的 “重复问题” 更好。除此之外，答案很好，解释很全面。 - slebetman

@slebetman 在他的帖子正文中，原帖作者（对我来说）明确提出了两个问题。这个回答实际上引用了（并随后回答了）这两个问题。我认为你的反对没有道理。 - millimoose

@millimoose：前两段已被删除。原始的前两段解释了jQuery不是魔法，它是用JavaScript编写的，并且是DOM对象的包装器。我认为OP已经理解了这一点。目前的前两段对我来说还可以。 - slebetman

Answer 2

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

- Stefan

Answer 3

我使用了以下代码来创建一个简单的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();
    }
}

- Sapnandu

Answer 4

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

- btm1