JQuery 的顶级对象$

news/2024/7/10 22:56:21 标签: jquery

$是JQuery的别称,在代码中可以使用JQuery代替 $,但一般为了方便,通常都直接使用$;
$是JQuery的顶级对象,相当于原生JavaScript中的windows,把元素利用$包装成JQuery对象,就可以调用JQuery的方法.

<body>
    <div></div>
    <script>
        // 1.$是Jquery的别称(另外的名字)
        $(function(){
            $('div').hide();
        });

        jQuery(function(){
            $('div').hide();
        });

        //2.$同时也是jQuery的 顶级对象
    </script>
</body>

JQuery对象和DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <script>
        // 1.DOM对象: 用原生JS获取来的对象就是DOM对象
        var myDiv = document.querySelector('div');
        var mySpan = document.querySelector("span");
        console.dir(myDiv);
        console.dir(mySpan);

        //2.JQuery对象: 用JQuery方法获取的元素就是JQuery对象.本质: 通过$把DOM元素进行了包装
        $('div'); // 是一个jQuery对象
        console.dir($('div'));
        console.dir($('span'));

        //3.jQuery对象本质是: 利用$对DOM对象包装后产生的对象(伪数组形式存储).
        //4.jQuery对象只能使用jQuery方法,DOM对象则使用原生的javascript属性和方法
        
        // 正确
        myDiv.style.display = 'none';

        // 错误, jQuery不能使用原生js的属性和方法
        // $('div').style.display = 'none';

        // 错误,myDiv是一个DOM对象不能使用1jquery里面的hide()
        myDiv.hide();
    </script>
</body>
</html>

jQuery 对象和Dom对象相互转换

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

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转为jQuery对象: $(DOM对象)
        //(1)我们直接获取视频,得到就是jQuery对象
        $('video');

        //(2)我们已经使用原生js 获取过来 DOM对象,转为jQuery
        var myvideo = document.querySelector('video');
        $(myvideo); //不要加引号
        $(myvideo).play(); //jQuery里面没有play方法,play方法是原生js里面的

        // 2.jQuery对象转为DOM对象
        //方式1
        //$('div')[index] index是索引号
        $('video')[0].play();
        //方式2
        //$('div').get(index) index是索引号
    </script>
</body>