1.jQuery简介，入口函数，$和dom相互转化

最新推荐文章于 2022-04-05 16:09:15 发布

无声有寒

最新推荐文章于 2022-04-05 16:09:15 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_33651064/article/details/105603362

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍jQuery的基本概念，包括其优点、入口函数的使用，以及如何将DOM对象转换为jQuery对象和反之。探讨了jQuery对象与DOM对象的区别及相互转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.jQuery简介。

2.优点。

3.入口函数：主要元素加载完毕再执行代码。

这样script就可以写到div前面了。

    <script>
        // $('div').hide();
        // 1. 等着页面DOM加载完毕再去执行js 代码
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2.  等着页面DOM加载完毕再去执行js 代码
        $(function() {
            $('div').hide();

        })
    </script>
    <div></div>

4.顶级对象$=jQuery

div就被包装成jQuery对象，然后调用里面的方法了。

<script>
        // 1. $ 是jQuery的别称（另外的名字）
        // $(function() {
        //     alert(11)
        // });
        jQuery(function() {
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        });
        // 2. $同时也是jQuery的 顶级对象
    </script>

5.jQuery对象和Dom对象

他们的方法不能混用。

jQuery获取的对象以伪数组形式存在。

<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>

6.jQuery和Dom对象的相互转化。

 <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>