JavaScript jQuery对象和DOM对象的区别和转换

柒边形选手

已于 2022-02-08 20:28:48 修改

阅读量512

点赞数 1

分类专栏：笔记文章标签： jquery javascript 前端

于 2022-02-05 12:18:36 首次发布

本文链接：https://blog.csdn.net/m0_55201788/article/details/122789283

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

1.用原生JS获取来的对象就是DOM对象
2. jQuery方法获取的元素就是jQuery对象。
3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。

1. DOM 对象：用原生js获取过来的对象就是DOM对象
2. jQuery对象：用jquery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装
3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法

<body>
    <div></div>
    <span></span>
    <script>
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);

        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));

        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>
</body>

DOM对象与jQuery对象之间的相互转换

因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

1. DOM对象转换为jQuery对象: $(DOM对象)

$("div")

2. jQuery对象转换为DOM对象(两种方式)

$('div")[index]      index是索引号
$('div").get(index)  index 是索引号

jQuery是伪数组，索引号是index+1个

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们直接获取视频，得到就是jQuery对象
        // $('video');
        // (2) 我们已经使用原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面没有play 这个方法
        // 2.  jQuery对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

柒边形选手

关注

1
点赞
踩
3

收藏

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

1.用原生JS获取来的对象就是DOM对象2. jQuery方法获取的元素就是jQuery对象。3. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。1. DOM 对象：用原生js获取过来的对象就是DOM对象2. jQuery对象：用jquery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法<body>.
复制链接

扫一扫