jQuery 对象和 DOM 元素

Question

我想了解 jQuery 对象和 DOM 元素之间的关系。

当 jQuery 返回一个元素时，它在警报中显示为 [object Object] 。 当 getElementByID 返回一个元素时，它显示为 [object HTMLDivElement]。这到底是什么意思？我的意思是它们都是有区别的对象吗？

还有什么方法可以操作 jQuery 对象和 DOM 元素？单个 jQuery 对象可以代表多个 DOM 元素吗？

Answer 1

我想了解 jQuery 对象和 DOM 元素之间的关系

jQuery 对象是一个包含 DOM 元素的类似数组的对象。一个 jQuery 对象可以包含多个 DOM 元素，具体取决于您使用的选择器。

还有什么方法可以操作 jQuery 对象和 DOM 元素？单个 jQuery 对象可以代表多个 DOM 元素吗？

jQuery 函数（完整列表位于网站上）对 jQuery 对象而不是 DOM 元素进行操作。您可以使用 .get() 访问 jQuery 函数内的 DOM 元素，或者直接访问所需索引处的元素：

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

换句话说，以下操作应该得到相同的结果：

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

有关jQuery 对象，请参阅文档。另请查看 .get() 的文档

Answer 2

当您使用 jQuery 获取 DOM 元素时，jQuery 对象返回包含对该元素的引用。当您使用像 getElementById 这样的本机函数时，您可以直接获取对元素的引用，而不是包含在 jQuery 对象中。

jQuery 对象是一个类似数组的对象，可以包含多个 DOM 元素：

var jQueryCollection = $("div"); //Contains all div elements in DOM

上面的行可以在没有 jQuery 的情况下执行：

var normalCollection = document.getElementsByTagName("div");

事实上，当您传入一个简单的选择器（如 div。您可以使用 get 方法访问 jQuery 集合中的实际元素：

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

当 jQuery 对象内有一个元素或一组元素时，您可以使用 jQuery API 中可用的任何方法，而当您拥有原始元素时，您只能使用本机 JavaScript 方法。

Answer 3

上个月我刚刚开始使用 jQuery，我的脑海中一直萦绕着类似的问题。到目前为止，您收到的所有答案都是有效且准确的，但一个非常精确的答案可能是这样的：

假设您在一个函数中，要引用调用元素，您可以使用 this，或<代码>$(this)；但有什么区别呢？事实证明，当您使用 $(this) 时，您将 this 包装在 jQuery 对象内。这样做的好处是，一旦一个对象是 jQuery 对象，您就可以在其上使用所有 jQuery 函数。

它非常强大，因为您甚至可以包装元素的字符串表示形式，var s = '

hello world

;!'，在 jQuery 对象中，只需将其直接包装在 $(): $(s) 中即可。现在您可以使用 jQuery 操作所有这些元素。

Answer 4

大多数 jQuery 成员函数没有返回值，而是返回当前的 jQuery 对象或另一个 jQuery 对象。

---

因此，

console.log("(!!) jquery >> " + $("#id") ) ; 

将返回[object Object]，即一个jQuery对象，它维护集合，该集合是评估选择器String的结果（>"#id") 针对 Document，

而 ,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

将返回 [object HTMLDivElement] （或者实际上是 [object Object] 在 IE 中）因为/如果返回值是div 元素。

---

还有什么方法可以操作 jQuery 对象和 DOM 元素？ (1) 单个 jQuery 对象可以代表多个 DOM 元素吗？ (2)

(1) jQuery 中有许多与 DOM Object 相关的成员Function。在我看来，最好的做法是在执行特定任务（例如选择节点或操作它们）后，在 jQuery API 文档中搜索相关的函数。

• jQuery 文档

(2) 是的，单个 jQuery 对象 可以维护一个列表多个 DOM Element。有多个函数（例如jQuery.find或jQuery.each）建立在这种自动缓存行为之上。

Answer 5

那只是你的浏览器很聪明。它们都是对象，但 DOMElement 是特殊的对象。 jQuery 只是将 DOMElements 包装在 Javascript 对象中。

如果您想获得更多调试信息，我建议您查看调试工具，例如 Firefox 的 Firebug 和 Chrome 的内置检查器（与 Firebug 非常相似）。

Answer 6

除了已经提到的内容之外，我想添加一些关于为什么根据 jquery-object

• 兼容性

元素方法的实现因浏览器供应商和版本而异。

例如，设置元素的 innerHTML 可能在大多数版本的 Internet Explorer 中不起作用。

您可以通过jQuery的方式设置innerHTML，jQuery将帮助您隐藏浏览器的差异。

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );

• 方便

jQuery 提供了一系列与 jQuery 对象绑定的方法，以方便开发者体验，请在 http://api 下查看其中一些方法.jquery.com/。该网站还提供了通用的 DOM 操作，让我们看看如何以两种方式在 target 元素后面插入存储在 newElement 中的元素。

DOM方式，

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

jQuery方式，

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

希望这是一个补充。