使用 JavaScript DOM 对象与 jQuery 对象

位置:首页>文章>详情   分类: Web前端 > 编程技术   阅读(270)   2023-06-26 07:54:31

简而言之,DOM 对象是 Web 浏览器用来在网页上呈现元素的对象,而 jQuery 对象基本上是围绕一组 DOM 元素的包装对象。如果您想详细了解这些对象以及如何使用它们以及如何相互转换,请继续阅读本教程。

什么是 JavaScript DOM 对象?

如前所述,浏览器直接使用 DOM 对象在浏览器窗口中呈现网页。浏览器从 Web 服务器接收 HTML 文档,它只是文本。浏览器继续将此文本解析为内部结构,它实际上可以用来可视化地呈现页面。 DOM 表示浏览器具有的 HTML 文档的内部结构。 DOM 对象表示页面上从原始 HTML 文档创建的视觉或功能对象

即使浏览器已完全呈现网页,您也可以使用 JavaScript 更改 DOM 对象,它是 属性和值。以这种方式进行的任何更改都会自动刷新浏览器窗口中显示的视觉表示。

使用 DOM 对象的优势是您可以直接访问操作 HTML 元素所需的一切。 DOM 对象的缺点 是大多数附加函数和属性都是浏览器需要的东西,在您使用 JavaScript 时不一定有用。这使得使用它们的速度变慢了一点,至少对于经验不足的开发人员来说是这样。

例如要更改段落或标签的内容,您可以像这样使用 javascript:

document.getElementById("label_firstname").innerHTML = "First Name";

什么是 jQuery 对象?

jQuery 对象是围绕单个或多个 DOM 元素的包装器对象。 jQuery 对象(尽管在技术上仍然是 JavaScript 对象)提供对包装的 DOM 元素的访问——但是,以一种非常不同、更容易且通常更有效的方式。

请记住,一个 jQuery 对象可能表示单个 DOM 对象,也可能表示一组许多 DOM 对象。因此,如果您对 jQuery 对象应用一个操作,它可能会应用到许多 DOM 对象。

使用 jquery 对象有它自己的优势。例如,jQuery 提供了很多有用的库方法 在它所代表的 DOM 元素内部搜索元素,并对搜索到的元素执行批量操作,而无需在代码中迭代它们。

例如要更改段落或标签的内容,您可以像这样使用 jQuery:

("#label_firstname").html("First Name");

如何判断一个对象是DOM还是jQuery?

很多时候,在处理任何复杂的应用程序时,您可能会发现 jQuery 对象和 javascript DOM 对象都在一段代码中。现在您不确定它是 jQuery 对象、DOM 对象还是其他一些 JavaScript 对象。有一种简单的方法可以区分它们。

确认一个对象是否是jQuery对象,看对象是否有jquery属性:

if( obj.jquery ) {
	//other operation
}

类似地,要确认一个对象是否是DOM对象,看对象是否有nodeType属性:

if( obj.nodeType ) {
	//other operation
}

将对象从 DOM 转换为 jQuery 并返回

在上述情况下,如果您想将对象从 DOM 转换为 jQuery 或将 jQuery 转换为 DOM,您可以使用以下技术来完成。

将 DOM 对象转换为 jQuery 对象

$()jquery() 方法从 DOM 对象创建一个新的 jQuery 对象。

var jqueryObj = $(domObj);

将 jQuery 对象转换为 DOM 对象

.get() 方法返回包裹在 jQuery 对象中的 DOM 对象。

var domObj = jqueryObj.get();

这就是关于 javascript DOM 对象和 jQuery 对象的全部内容。如果有任何问题或建议,请给我留言。

快乐学习!!

地址:https://www.cundage.com/article/javascript-dom-objects-vs-jquery-objects.html

相关阅读

简而言之,DOM 对象是 Web 浏览器用来在网页上呈现元素的对象,而 jQuery 对象基本上是围绕一组 DOM 元素的包装对象。如果您想详细了解这些对象以及如何使用它们以及如何相互转换,请继...
JavaScript 从 URL 读取 JSON 教程展示了如何从提供的 URL 读取 JSON 格式的数据。我们使用 JQuery、Fetch API 和 XMLHttpRequest。 网址...
Cheerio 教程展示了如何使用 Cheerio 模块在 JavaScript 中进行网页抓取。 Cheerio 实现了为服务器设计的 jQuery 核心。 切里奥 切里奥 是专为服务器设计的...
在 JavaScript Mustache 教程中,我们展示了如何使用 Mustache 模板引擎。 胡子 胡子 是一个简单的网页模板系统。它适用于许多编程语言,包括 JavaScript 和 ...
异步 JavaScript 和 XML (AJAX) 是一门艺术与实时服务器交换数据,更新网页的一部分——无需重新加载整个网页。 换句话说,AJAX 允许通过在后台与服务器交换少量数据来异步更新...
JavaScript 添加字符串教程展示了如何在 JavaScript 中连接字符串。 在 JavaScript 中,字符串是用于表示和操作字符序列的对象。 在 JavaScript 中有几种添...
JavaScript 数组教程展示了如何在 JavaScript 中使用数组。 数组是许多值的集合。数组项称为数组的元素。每个元素都可以通过索引引用。数组是从零开始的。 JavaScript 数...
JavaScript JSON.parse 教程展示了如何将 JSON 字符串解析为 JavaScript 对象。 JSON JSON(JavaScript 对象显示法) 是一种轻量级数据交换格...
JavaScript 数组循环教程展示了如何在 JavaScript 中循环遍历数组。我们可以使用 forEach 方法以及 for 和 while 语句遍历元素。 数组是许多值的集合。数组项称...
JavaScript JSON.stringify 教程展示了如何将 JavaScript 对象转换为 JSON 字符串。 JSON JSON(JavaScript 对象显示法) 是一种轻量级数...