jQuery 選擇器上的 JavaScript 方法

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

由於 jQuery 建立在 Sizzle 之上，因此您可以參考此鏈接下的 Sizzle 文檔。

由於$只是一個別名，您可以參考文檔：

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

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

以上將返回一個數組，即使只有一個元素。 因此，如果您想准確引用一個元素，則必須使用數組索引，例如：

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

Answer 3

.get()應該做這樣的工作：

$(document.body).get(0)

Answer 4

這是一個本機 DOM 代碼，它肯定可以工作：

document.body.appendChild(x)