jQuery 对象和 DOM 元素

Posted 2023-05-09

【中文标题】jQuery 对象和 DOM 元素

【英文标题】：jQuery object and DOM element

【发布时间】：2011-10-21 22:06:16

【问题描述】：

我想了解 之间的关系..

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

还有哪些方法可以对 进行操作？一个 jQuery 对象可以代表多个 DOM 元素吗？

【问题讨论】：

***.com/questions/15479988/…

【参考方案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 对象的更多信息，see the documentation。另请查看.get()的文档

【参考方案2】：

当你使用 jQuery 获取一个 DOM 元素时，jQuery 对象返回包含对该元素的引用。当你使用像 getElementById 这样的原生函数时，你会直接获得对元素的引用，而不是包含在 jQuery 对象中。

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

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

上面的行可以不用jQuery来执行：

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

事实上，当你传入像div 这样的简单选择器时，这正是jQuery 在内部所做的。您可以使用 get 方法访问 jQuery 集合中的实际元素：

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

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

【参考方案3】：

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

假设你在一个函数中，要引用调用元素，你可以使用this，或者$(this)；但有什么区别？事实证明，当您使用$(this) 时，您将this 包装在一个jQuery 对象中。好处是一旦一个对象是一个 jQuery 对象，你就可以使用它上面的所有 jQuery 函数。

它非常强大，因为您甚至可以将元素的字符串表示 var s = '<div>hello <a href='#'>world</a></div><span>!</span>' 包装在 jQuery 对象中，只需将其包装在 $() 中即可：$(s)。现在您可以使用 jQuery 操作所有这些元素。

【参考方案4】：

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

---

所以，

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

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

同时，

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

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

---

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

(1) jQuery 中有许多成员 Functions 属于 DOM Objects。对 imo 最好的做法是在您完成特定任务（例如选择 Nodes 或操作它们）后，在 jQuery API 文档中搜索相关的 Function。

jQuery documentation

(2) 是的，单个 jQuery Object 可以维护多个 DOM Elements 的列表。有多个Functions（例如jQuery.find 或jQuery.each）基于这种自动缓存行为。

【讨论】：

哦，好吧..所以只有在 IE 以外的浏览器中，它才会明确指出“[object HTMLDivElement]”与 [object Object]

据我所知，是的。在 IE 中，[object Object] 仍然是 div Element。如果使用 jQuery 选择，它将是 jQuery Object.

【参考方案5】：

这只是你的浏览器很聪明。它们都是对象，但 DOMElement 是 special 对象。 jQuery 只是将 DOMElements 包装在一个 Javascript 对象中。

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

【参考方案6】：

除了已经提到的，我想补充一下为什么根据jquery-object的描述导入jQuery对象

兼容性

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

例如，设置元素的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 );

希望这是一个补充。