jQuery对象和DOM元素

Question 1

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

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

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

Question 2

我想了解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()

Question 3

当您使用jQuery获取DOM元素时，jQuery对象返回的内容包含对该元素的引用。当您使用类似的本机函数时getElementById，您将直接获得对该元素的引用，而不是包含在jQuery对象中。

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

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

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

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

实际上，这正是jQuery在传递类似的简单选择器时将在内部执行的操作div。您可以使用以下get方法访问jQuery集合中的实际元素：

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

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

Question 4

上个月，我才刚开始使用jQuery，并且在我脑海中也遇到了类似的问题。到目前为止，您已收到的所有答案都是有效的，而且很简单，但可能非常准确的答案是：

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

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

Question 5

大多数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]在IE中），因为/如果返回值为a div Element。

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

（1）FunctionjQuery中有许多与DOM有关的member Object。要做imo最好的方法是，Function一旦执行了特定任务（例如选择Nodes或对其进行操作），便在jQuery API文档中进行搜索。

jQuery文档

（2）是，一个jQuery Object可以维护多个DOMElement的列表。在此自动缓存行为的基础上，有多个Functions（例如jQuery.find或jQuery.each）。

Question 6

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

如果您想获取更多调试信息，建议您使用调试工具，例如适用于Firefox的Firebug和Chrome的内置检查器（与Firebug极为相似）。

Question 7

除了已提及的内容外，我还要添加一些关于为什么根据来自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 );

希望这是一个补充。