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)或$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();
    }
}

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

4 个答案: