jQuery 对象和 DOM 对象 ( js 对象 ) 之间的相互转换

为了更好地说明后面的问题，先将代码贴上来（代码可以直接运行）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>

    <ul>
        <li id="cloth">衣服</li>
        <li>裤子</li>
        <li>鞋子</li>
        <li>袜子</li>
    </ul>

    <p>
        我是第一个原生的 p 标签中的内容
    </p>

    <p>
        我是第二个原生的 p 标签中的内容
    </p>
</body>
<script>
    $(function() {

        var cloth = document.getElementById("cloth"); //得到的是 DOM 对象
        cloth.style.backgroundColor = "pink"; //DOM 对象操作 DOM 对象的方法，没有问题
        //cloth.text("哈哈哈"); //程序报错，因为 DOM 对象不能调用 jQuery 对象的方法


        //变量名前面加 $ 符号，只是提醒自己这是个 jQuery 对象，并不是必须要这样做
        var $p = $("p"); //得到的是 jQuery 对象
        console.log($p); //打印 jQuery 对象会看到很多有用的东西，自己可以试一下
        $p.text("我是更改后的 p 标签中的内容"); //jQuery 对象操作 jQuery 对象的方法，没有问题
        /*
        *     如果写成 $p[0].setAttribute("name","thisisp"); 
        * 那么我们在浏览器中打开开发者工具后，点击 Elements 选项，
        * 就会看到第一个 p 标签被加上了一个 name 属性，
        * 这就是我们后面会讲到的如何将 jQuery 对象转为 DOM 对象
        * */
        //$p.setAttribute("name","thisisp"); //程序报错，因为 jQuery 对象不能调用 DOM 对象的方法


        /*
        * DOM 对象转为 jQuery 对象，将 DOM 对象放在 $() 里面即可
        * */
        $(cloth).text("我现在是 jQuery 对象");


        /*
        * jQuery 对象转为 DOM 对象：
        * 总体思路就是将 jQuery 对象看成一个伪数组，然后将其中的单个元素取出来，得到的就是 DOM 对象
        * */

        //方法一：$p 是 jQuery 对象，$p[0] 就变成了 DOM 对象
        $p[0].style.backgroundColor = "red";

        //方法二：$p 是 jQuery 对象，$p.get(1) 就变成了 DOM 对象
        $p.get(1).style.backgroundColor = "yellow";
    });
</script>
</html>

基本概念

什么是 jQuery 对象？

用 jQuery 的方式获取到的对象就是 jQuery 对象。如上面代码中的变量 $p 就是 jQuery 对象
什么是 DOM 对象？

使用 js 的方式获取到的对象就是 DOM 对象（ js 对象）。如上面代码中的变量 cloth 就是 DOM 对象

区别与联系

jQuery 对象和 DOM 对象有什么区别？

从使用上来讲，它们之间最大的区别就是：jQuery 对象不能调用 DOM 对象的方法，DOM 对象也不能调用 jQuery 对象的方法，因为它们本来就是两个不同的对象。
jQuery 对象和 DOM 对象有什么联系？

jQuery 对象其实就是 DOM 对象 ( js 对象) 的一个集合，可以将 jQuery 对象理解为一个伪数组，里面存放的是一大堆的 DOM 对象。所谓伪数组可以将其简单地理解为它没有数组的方法，但有属于自己的一些方法

相互转换（重点）

jQuery 对象转为 DOM 对象，方法有两种，具体方法请看上面代码，注释写得很清楚
DOM 对象转为 jQuery 对象，将 DOM 对象放在 $() 里面即可，具体方法请看上面代码

jQuery 对象和 DOM 对象 ( js 对象 ) 之间的相互转换

基本概念

区别与联系

相互转换（重点）

猜你喜欢