JavaScript jQuery 选择器上的方法

Question

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

例如下面的代码：

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

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

（请不要建议我可以用jQuery的append()代替，只是为了举例）

Answer 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.

Answer 2

这是本机 DOM 代码，应该绝对有效：

document.body.appendChild(x)

Answer 3

由于 jQuery 构建于 Sizzle 之上，您可以参考 this link.

下的 Sizzle 文档

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

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

The main function for finding elements. Uses querySelectorAll if available.

以上将 return 一个数组，即使只有一个元素。所以如果你想精确地引用一个元素，你必须使用数组索引，如：

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

Answer 4

.get() 应该这样做：

$(document.body).get(0)

JavaScript Methods on jQuery Selectors