Javascript jQuery对象和DOM元素

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

当jQuery返回一个元素时，它在警报中显示为

[object object]

。 当

getElementByID

返回一个元素时，它显示为

[object htmldevelment]

。这到底是什么意思？我的意思是，这两个物体有区别吗

---

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

这正是您的浏览器的优点。它们都是物体，但家庭元素是特殊的物体。jQuery只是将doElements包装在Javascript对象中

如果你想获得更多的调试信息，我建议你看看Firefox的Firebug和Chrome的内置inspector（非常类似于Firebug）等调试工具

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

警报（$（“#foo”）[0]）；
警报（$（“#foo”）.get（0））；
警报（document.getElementById（“foo”）；

---

有关jQuery对象的详细信息。还可以查看文档，了解大多数jQuery成员

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


所以

将返回
[object object]
，即一个
jQuery对象
，该对象维护集合，该集合是对
文档
评估选择器
字符串
（
“#id”
）的结果

而

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

将返回
[object htmldevelment]
（或者实际上是IE中的
[object object]
），因为/如果返回值是
div
元素


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

（1） jQuery中有许多成员
函数
s属于DOM
对象
s。imo最好的做法是，一旦您有了特定的任务（例如选择
节点
或操作它们），就在jQuery API文档中搜索相关的
函数




（2） 是的，单个
jQuery对象
可以维护多个DOM
元素的列表。有多个
函数
（例如
jQuery.find
或
jQuery.each
）建立在这种自动缓存行为的基础上。
当您使用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方法。
我上个月才刚刚开始玩jQuery，我的脑海中也有一个类似的问题。到目前为止，您收到的所有答案都是有效的，而且都是即时的，但一个非常准确的答案可能是：

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

它非常强大，因为您甚至可以包装元素的字符串表示形式，
var s='hello！'，在jQuery对象内部，只需将其按字面意思包装成$（）：
$（s）
。现在，您可以使用jQuery操作所有这些元素。
除了前面提到的内容之外，我还想添加一些关于为什么根据中的描述导入jQuery对象的内容


相容性

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

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

您可以用jQuery的方式设置innerHTML，jQuery将帮助您隐藏浏览器之间的差异

// Setting the inner HTML with jQuery.

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

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

jQuery方式

// Inserting a new element after another with jQuery.

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

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

$( target ).after( newElement );

希望这是一个补充
 哦，好的。所以只有在其他浏览器中，IE才会特别声明“[object htmldevelment]”和[object object]，据我所知，是的，就是这样。在IE中，
[object object]
仍然是一个
div
元素。如果使用jQuery选择，它将是一个
jQuery对象
。
// 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 );

// Inserting a new element after another with jQuery.

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

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

$( target ).after( newElement );