jQuery 选择器上的 JavaScript 方法答案

【问题标题】：JavaScript Methods on jQuery SelectorsjQuery 选择器上的 JavaScript 方法
【发布时间】：2017-07-01 16:50:31
【问题描述】：

如何从 JQuery 选择器访问核心 HTML DOM 元素？

例如下面的代码：

$(document.body).appendChild(x);

将不起作用，因为$(document.body) 所指的 DOM 对象被 JQuery 选择器对象包裹。

（请不要建议我可以使用jQuery的append()代替，这只是一个例子）

【问题讨论】：

【解决方案1】：

jQuery 对象是原生 DOM 元素的数组。所以试试这个：

$(document.body)[0].appendChild(x)

另一方面，如果你有一个原生 DOM 元素，你可以将它包装在一个 jQuery 对象中，以便在其上使用 jQuery 的方法。

var x = document.getElementsByTagName('div');
$(x).remove(); // wrap it with $ to use jQuery methods.

【讨论】：

【解决方案2】：

.get() 应该这样做：

$(document.body).get(0)

【讨论】：

【解决方案3】：

由于 jQuery 是在 Sizzle 之上构建的，您可以参考 this 链接下的 Sizzle 文档。

由于$只是一个别名，可以参考文档：

$(String selector[, DOMNode context[, Array results]])

查找元素的主要功能。使用 querySelectorAll 如果可用。

上面将返回一个数组，即使只有一个元素。因此，如果您想准确引用一个元素，则必须使用数组索引，例如：

$(document.body)[0].appendChild(x);

【讨论】：

@Arjun 你能详细说明你的陈述吗？
@Jai No. var elem = document.querySelector('#parent .child:nth-child(1)'); $(elem).addClass('HelloWorld'); 在 Javascript 对象上调用 jQuery 方法
@Jai 我知道，但这就是 OP 想要的反之亦然，我知道当你可以直接使用 jQuery 但 OP 想要它时，这不是首选

【解决方案4】：

这是一个绝对可以工作的原生 DOM 代码：

document.body.appendChild(x)

【讨论】：