jQuery和DOM对象的相互转换（附带实例）

jQuery 对象与 DOM 对象也可以相互转换。在两者相互转换之前首先要约定定义变量的风格。

如果获取的是 jQuery 对象，那么可以在变量前面加上 $，例如：

var $obj = jQuery对象;

如果获取的是 DOM 对象，定义变量的风格则与平时习惯的风格一样：

var obj = DOM对象;

注意，为便于读者阅读，本节中的实例都会以上文定义的风格呈现。这种约定只是便于讲解与区分，在实际应用中并不做此约定。

jQuery对象转换成DOM对象

jQuery 提供了两种转换方式将一个 jQuery 对象转换成一个 DOM 对象，即 [index] 和 get（index）。

1) jQuery 对象是一个类似数组的对象，可以通过 [index] 方法转换成相应的 DOM 对象，例如：

var $mr = $("#mr");    // jQuery对象
var mr = $mr[0];      // DOM对象
alert(mr.value);      // 获取 DOM 对象的 value 的值并弹出

2) jQuery 本身也提供 get(index) 方法，可以将 jQuery 对象转换成相应的 DOM 对象，例如：

var $mr = $("#mr");    // jQuery对象
var mr = $mr.get(0);  // 获取 DOM 对象的 value 的值并弹出
alert(mr.value);

DOM对象转换成jQuery对象

对于一个 DOM 对象，只需要用 () 把它包装起来，即（DOM 对象），就可以将其转换成一个 jQuery 对象，例如：

var mrs = document.getElementById("mr");  // DOM对象
var $mr = $(mr);  // jQuery对象
alert($(mr).val());  // 获取文本框的值并弹出

通过以上方式，可以任意实现 DOM 对象和 jQuery 对象之间的转换。需要再次强调的是，DOM 对象才能使用 DOM 中的方法，而 jQuery 对象是不能使用 DOM 中的方法的。

下面我们举两个简单的例子来加深读者对 DOM 对象和 jQuery 对象相互转换的理解。

【实例 1】 DOM 对象转换成 jQuery 对象。
① 创建一个名为 js 的文件夹，并将 jquery-3.6.4.min.js 复制到该文件夹中。
② 创建一个名为 index.html 的文件，在该文件的 <head> 标记中引用 jQuery 库文件，关键代码如下：

<script language="javascript" src="js/jquery-3.6.4.min.js"></script>

③ 编写 jQuery 代码，实现在页面载入完毕后，首先使用 DOM 对象中的方法弹出 <p> 节点的内容，之后将 DOM 对象转换成 jQuery 对象，使用 jQuery 对象中的方法同样再弹出 <p> 节点的内容。具体代码如下：

<script>
$(document).ready(function(){
    var domObj = document.getElementById("testp");
   alert("使用 DOM 方法获取<p>节点的内容："+domObj.innerHTML);
    var $jqueryObj = $(domObj);
   alert("使用 jQuery 方法获取<p>节点的内容："+$jqueryObj.html());
});
</script>

运行 index.html，将弹出下图所示的提示对话框：

图 1 弹出的提示对话框

【实例 2】 jQuery 对象转换成 DOM 对象。
① 创建一个名为 js 的文件夹，并将 jquery-3.6.4.min.js 复制到该文件夹中。
② 创建一个名为 index.html 的文件，在该文件的 <head> 标记中引用 jQuery 库文件，关键代码如下：

<script language="javascript" src="js/jquery-3.6.4.min.js"></script>

③ 编写 jQuery 代码，实现在页面载入完毕后，首先获取两个 jQuery 对象，使用 jQuery 对象中的方法分别弹出两个 <p> 节点的内容，之后分别使用 [index] 和 get(index) 方法将 jQuery 对象转换成 DOM 对象，使用 DOM 对象中的方法同样再弹出两个 <p> 节点的内容。具体代码如下：

<script>
$(document).ready(function(){
    var $jQueryObj = $("#testp");
    alert("使用 jQuery 方法获取第一个<p>节点的内容："+$jQueryObj.html());
    var $jQueryObj1 = $("#testp1");
    alert("使用 jQuery 方法获取第二个<p>节点的内容："+$jQueryObj1.html());
    var domObj = $jQueryObj[0];
    alert("使用 DOM 方法获取第一个<p>节点的内容："+domObj.innerHTML);
    var domObj1 = $jQueryObj1.get(0);
    alert("使用 DOM 方法获取第二个<p>节点的内容："+domObj1.innerHTML);
});
</script>

运行 index.html，将弹出下图所示的提示对话框：

图 2 弹出的提示对话

jQuery和DOM对象的相互转换（附带实例）

jQuery对象转换成DOM对象

DOM对象转换成jQuery对象

相关文章