jQuery概述-CSDN博客

本文链接：https://blog.csdn.net/qq_46112274/article/details/122357604

1、jQuery概述

1.1、JavaScript库

在这里插入图片描述

1.2、jQuery的概念

在这里插入图片描述

2、jQuery的基本使用

2.1、jQuery的下载

在这里插入图片描述

2.2、引入jQuery文件

去jquery官网下载jquery代码，在项目中新建jquery.min.js文件，将在jquery官网得道的jquery代码复制到jquery.min.js文件中。
在这里插入图片描述

2.3、jQuery的入口函数

在这里插入图片描述

2.4、jQuery的顶级对象

在这里插入图片描述

<!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: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1、$ 是jQuery的别称（另外的名字）
        // $(function(){
        //     alert(11)
        // });
        jQuery(function(){
            alert(22)
            $('div').hide();
            jQuery('div').hide();
        });
        // 2、$同时也是jQuery的 顶级对象
    </script>
</body>
</html>

2.5、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: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <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对象则只能使用原生的JavaScript属性和方法
        //myDiv.style.display='none';
        //myDiv.hide();//myDiv是一个dom对象不能使用jquery里面的hide方法
        //$('div').style.display = 'none';//这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
</body>
</html>

2.6、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>
</head>
<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对象
        // myvedio.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>
</html>