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

Question

$('#elementID')返回的对象与document.getElementById('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')返回的对象有什么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() ，使用.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();
    }
}