jQuery的基本使用（jQuery与DOM转换）

最新推荐文章于 2022-07-07 20:15:00 发布

失忆症患者_

最新推荐文章于 2022-07-07 20:15:00 发布

阅读量194

点赞数

分类专栏： jQuery基础文章标签： jquery

本文链接：https://blog.csdn.net/qq_41929578/article/details/109015616

版权

jQuery基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们在使用 jQuery 之前需要导入jQuery的库，在 jQuery 官网即可下载；

DOM对象和 jQuery 对象的对比

<body>
    <div></div>
    <span></span>
    <script>
        // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
        $('span'); // $('span')是一个jQuery 对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
    </script>
</body>

jQuery 对象和 DOM 对象转换

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