jQuery对象和DOM元素

Question

jQuery对象和DOM元素我想了解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元素。您可以使用以下方法访问jQuery函数中的DOM元素.get()或直接访问所需索引中的元素：

$("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"));

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方法：

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

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

Answer 3

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

---

所以,

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

会回来[object Object]，即jQuery Object维护集合，这是评估选择器的结果。String("#id")反对Document,

同时，

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

会回来[object HTMLDivElement](或事实上[object Object])，因为/如果返回值是div Element.

---

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

(1)有许多成员Function在jQuery中，它与DOM有关。Object最好的方法是在jQueryapi文档中搜索相关的Function一旦您有了特定的任务(例如选择Nodes或操纵它们)。

• jQuery文档

(2)是的，一个单人jQuery Object可以维护多个DOM的列表。Element有多个Functions(如jQuery.find或jQuery.each)建立在这种自动缓存行为的基础上。