jQuery 对象和 DOM 对象的些区别和和如何对他们进行区分

本文链接：https://blog.csdn.net/m0_46639782/article/details/131743532

文章介绍了jQuery中的两种主要对象类型：jQuery对象和DOM对象。jQuery对象通过$()创建，用于操作DOM元素集合，拥有丰富的API；DOM对象则代表网页结构，可通过原生JavaScript方法获取。两者可通过[0]索引或get()互相转换。文章还提供了区分和转换的示例。

摘要由CSDN通过智能技术生成

在 jQuery 中，有两种常见的对象：jQuery 对象和 DOM 对象。它们之间有一些区别和区分。

一、 jQuery 对象：

定义：jQuery 对象是一个由 jQuery 函数（$）返回的特殊对象，它是对匹配的 DOM 元素集合进行操作的工具。

创建：可以使用 $() 函数来创建 jQuery 对象，传入选择器字符串、HTML 字符串、元素或 DOM 对象等参数。

特点：

jQuery 对象是一个包含匹配元素的集合，可以对这些元素进行操作。

jQuery 对象具有丰富的方法和属性，可以方便地进行 DOM 操作、事件处理、样式修改等。

示例：

var $element = $("#myElement"); // 创建一个 jQuery 对象，选取 ID 为 "myElement" 的元素

     $element.hide(); // 使用 jQuery 方法隐藏该元素

二、 DOM 对象：

定义：DOM（Document Object Model）对象是浏览器原生提供的对象，代表网页的结构化文档。

获取：可以通过原生 JavaScript 方法来获取 DOM 对象，如 getElementById、querySelector 等。

特点：

DOM 对象是实际的网页元素，直接与浏览器进行交互。

DOM 对象具有原生的属性和方法，可以操作元素的内容、样式、事件等。

示例：

var element = document.getElementById("myElement"); // 获取 ID 为 "myElement" 的 DOM 对象

     element.style.display = "none"; // 修改该元素的样式，使其隐藏

三、区分和使用方法：

区分方法：可以通过对象的类型进行区分。使用 typeof 运算符可以得到 jQuery 对象的类型为 "object"，DOM 对象的类型为 "object" 或 "undefined"。

使用方法：jQuery 对象和 DOM 对象之间可以相互转换，可以通过 [0] 索引或 get() 方法从 jQuery 对象中获取 DOM 对象，也可以使用 $() 函数将 DOM 对象封装成 jQuery 对象。

示例：

var $element = $("#myElement"); // 创建一个 jQuery 对象，选取 ID 为 "myElement" 的元素

var domElement = $element[0]; // 从 jQuery 对象中获取 DOM 对象

var $newElement = $(domElement); // 将 DOM 对象封装成 jQuery 对象