DOM对象和jQuery对象

最新推荐文章于 2025-03-04 11:29:10 发布

原创最新推荐文章于 2025-03-04 11:29:10 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #对象 #jQuery #JavaScript #转换 #ViewUI

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了DOM对象和jQuery对象的区别，包括定义、注意事项以及如何在两者间进行转换。DOM对象通过JavaScript获取，而jQuery对象则是通过jQuery语法创建。两者的互转对于前端开发者来说非常重要。

一：定义

DOM对象指的是通过传统的javaScript方法获取的元素对象，如下代码：

var DomObj1 = document.getElementById("id1");
var DomObj2 = document.getElementsByName("name2"); //IE下不支持
var DomObj3 = document.getElementsByTagName("div");

jQuery对象指的是通过jQuery语法包装原始的DOM对象后生成的新对象，如下代码：

var $JQObj1 = $("#id1");
var $JQObj2 = $("[name='name2']");
var $JQObj3 = $("div");

二：注意点

值得注意的是DOM对象不能调用jQuery对象的方法，如以下代码即为出错：

var DomObj = document.getElementsByTagName("input");
var ObjValue = DomObj.val();

同时，jQuery对象也不能调用DOM对象的方法，如以下代码即为出错：

var $JQObj = $("input");
var ObjValue = $JQObj.value;

三：相互转换

DOM对象转换成jQuery对象，只需要通过jQuery提供的$()进行包装即可；

jQuery对象转换成DOM对象，可以选择调用jQuery提供的[index]或者get(index)方法即可；

//DOM对象转换成jQuery对象
var DomObj = document.getElementsByTagName("input");
var $JQObj = $(DomObj);

//jQuery对象转换成DOM对象
var $JQObj = $("input");
var DomObj = $JQObj [0];//或者使用$JQObj.get(0)