在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)或访问第二个元素$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