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对象的更多信息，请see the documentation。另请查看.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这样的简单选择器时，这正是jQuery在内部所做的。您可以使用get方法访问jQuery集合中的实际元素：

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

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

Answer 3

上个月我刚刚开始玩jQuery，我心里也有类似的问题。到目前为止，您收到的所有答案都是有效的，但有一个非常精确的答案可能是：

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

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

Answer 4

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

所以，

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

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

while，

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

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

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

（1）jQuery中有一大堆成员Function属于DOM Object。最好的做法就是在有特定任务（例如选择Function或操纵它们）之后，在jQuery API文档中搜索相关的Node。

jQuery documentation

（2）是的，单个jQuery Object可以维护多个DOM Element的列表。有多个Functions（例如jQuery.find或jQuery.each）构建于此自动缓存行为之上。

Answer 5

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

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

Answer 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操作，让我们看看如何以两种方式在newElement元素之后插入target中存储的元素。

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 );

希望这是一种补充。

jQuery对象和DOM元素

6 个答案: