javascript - 在 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?
});

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

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)or访问第二个元素$elements[1]。

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

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

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

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

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

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

Answer 3

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

Answer 4

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