jQuery对象和DOM对象的相互转换

ianutt

已于 2022-08-26 10:37:54 修改

阅读量2.3k

点赞数

文章标签： jquery javascript 前端

于 2021-04-26 14:05:01 首次发布

本文链接：https://blog.csdn.net/ianutt/article/details/116152690

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

DOM对象：通过Js中的getElementsByTagName或者getElementsById来获取元素节点，这样的元素就是DOM对象。
jQuery对象：通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。例如：

$("#test").html() //获取ID为test的元素内的html代码。其中.html()是jQuery里的方法

这段代码等同于用：

document.getElementById("test").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法。同样的DOM对象中也不能使用jQuery对象中的方法。

在讨论jQuery对象和DOM对象的相互转换之前，先约定好定义变量的风格。如果获取的是jQuery对象，那么在变量前面加上$,例如：

var $varible = jQuery对象;

如果获取的是DOM对象，则定义如下：

var varible = DOM对象;

jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有两种方法，即[index]和get(index)。

（1）jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。

jQuery的代码如下：

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  <p>my</p>
  <p>my</p>
  <script>
    var $cr = $("p"); //jQuery对象
    var cr = $cr[0]; //第一种方法转成DOM对象
    var ct = $cr.get(1); //第一种方法转成DOM对象
    cr.innerHTML = "tu"; //检测是否转换成功，可以用DOM方法，输出结果为第一个my改成了tu
    ct.innerHTML = "tt"; //输出结果为第二个my改成了tt
   </script>
</script>
</body>

（2）DOM对象转换为jQuery对象：

对于一个DOM对象，只需要用$()把DOM对象给包装起来，就可以获得一个jQuery对象了，方式为$(DOM对象)。

jQuery代码如下：

<body>
  <p>my</p>
  <p>my</p>
<script src="jquery-2.1.4.min.js"></script>
<script>
  <p>my</p>
  <p>my</p>
  <script>
    var cr = document.getElementsByTagName("p"); //DOM对象
    var $cr = $(cr); //转成jQuery对象
    $cr.eq(0).html("tu"); //检测是否转换成功，可以用jquery方法，输出结果为第一个my改成了tu
   </script>
</script>
</body>

最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM。

注意：平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

ianutt

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jQuery对象和DOM对象的相互转换

DOM对象：通过Js中的getElementsByTagName或者getElementsById来获取元素节点，这样的元素就是DOM对象。jQuery对象：通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。例如：$("#test").html() //获取ID为test的元素内的html代码。其中.html()是jQuery里的方法这段代码等同于用：document.getElementById("test").innerHTML
复制链接

扫一扫