dom对象和jQuery对象以及之间的转换

谁借莪１个温暖的怀抱￠ 2021-06-22 15:30 469阅读 0赞

# dom对象和jQuery对象的转换 #

--------------------

## 1. dom对象 ##

dom对象是原生js选择器获取到的对象。

document.getElementById();
    document.getElementsByTagName();

而dom对象只能调用dom方法或者属性。

比如我们给一个div设置背景色为红色：

但是如果我们用dom对象调用jQuery方法呢？

显然是会出错的：  
![在这里插入图片描述][20191114102005579.png]

## 2. jQuery对象 ##

顾名思义，jQuery对象就是使用jQuery选择器获取到的对象。jQuery对象，也只能调用jQuery方法或者属性，不能调用原生jsdom对象的方法或者属性。

我们试一试，还是给一个div设置背景颜色：  
**这里有一点要格外注意，我们获取的jQuery对象，在赋给一个变量的时候，这个变量的名字通常以$开头。这是我们约定俗成的做法，以此来跟js原生的dom对象加以区分。**

那么如果我们使用jQuery对象来调用dom方法呢？

我们看一下出了什么问题：  
![在这里插入图片描述][20191114102912470.png]  
看来也是不可以的，提示说`Cannot set property 'backgroundColor' of undefined`。

**那么这个jQuery对象，到底是什么呢？**  
我们可以对比dom对象，把它们输出看一下：

在浏览器里看一下结果：  
![在这里插入图片描述][20191114103544515.png]  
我们可以进一步展开这个对象看一下，  
![在这里插入图片描述][20191114104047284.png]  
jQuery对象其实是一个伪数组，是dom对象的一个包装集。

我们还可以获取页面上所有的div，对比查看一下：

看一下结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]  
我们也可以知道，jQuery对象就是dom对象的一个包装集。

## 3. dom对象和jQuery对象之间的转换 ##

有时候，我们获取可一个dom对象，但是我们就是想调用jQuery方法，这个时候我们就需要这两种对象的相互转换了。

### ①dom→jQuery ###

dom对象转换成jQuery对象其实很简单。只需要把dom对象用`$()`包裹起来，就可以了。我们试一下：

// 获取dom对象
    var div1 = document.getElementById("div1");
    // 把dom对象转换成jQuery对象
    var $div1 = $(div1);
    // 输出查看一下
    console.log("dom对象：");
    console.log(div1);
    console.log("dom对象→jQuery对象：$div1");
    console.log($div1);

我们可以看到，转换是成功的。  
![在这里插入图片描述][20191114105611999.png]

### ② jQuery→dom ###

jQuery对象转换成dom对象，有两种方法。

#### 方法一: ####

使用下标取出。因为我们刚才介绍jQuery对象时说，jQuery对象是一个伪数组，是dom对象的包装集。jQuery对象中的每一个元素，其实就是一个个dom对象，顺理成章，我们就可以通过下标的方式，把dom对象取出来。我们试一下：

// 获取jQuery对象
    var $div1 = $("#div1");
    // 使用下标把dom对象取出来
    var div1 = $div1[0];
    //输出查看一下
    console.log("jQuery对象：$div1");
    console.log($div1);
    console.log("jQuery对象→dom对象：div1");
    console.log(div1);

我们可以看到，这样是可以的。  
![在这里插入图片描述][20191114110357330.png]

#### 方法二: ####

除了使用下标的方式取出，我们还可以使用jQuery的`get()`方法，把dom对象取出来。这个其实跟直接使用下标很类似。  
我们演示一下：

// 获取jQuery对象,所有的div
    var $divs = $("div");
    // 使用下标把dom对象取出来
    var div1 = $divs[1];
    //输出查看一下
    console.log("jQuery对象：$divs");
    console.log($divs);
    console.log("jQuery对象→dom对象：div1");
    console.log(div1);

我们看一下结果，  
![在这里插入图片描述][20191114111049238.png]  
我们可以看到，这样也是可以的。

--------------------

END.  
如果你不沉下心来认真练习，所有的阅读都是白费的。

[20191114102005579.png]: /images/20210615/27bc3e47032742748fdf7898a9151a0c.png
[20191114102912470.png]: /images/20210615/aab0f50d3d1f4e7da42aca9e6b31e93f.png
[20191114103544515.png]: /images/20210615/28ed6add550049d4aeaf6c24475be2e1.png
[20191114104047284.png]: /images/20210615/c8c6e76b8522414c980053c4aaf53cb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/03874e55f4c1498596f2c81ed557dd83.png
[20191114105611999.png]: /images/20210615/dfe6c99f56eb4e5b81dd72f2f18afa95.png
[20191114110357330.png]: /images/20210615/c242084c1f1347dbaa8b66f403a6031b.png
[20191114111049238.png]: /images/20210615/020d73282cdf49e085379a018f0fc0cb.png