jQuery基本使用

jQuery

jQuery基本使用

1. 下载

image-20230308231753013

2. 体验

image-20230308231803597

image-20230308231843681

3. 入口函数

image-20230308231900049

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>
    <!-- -1. 引入jQuery文件 -->
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // jQuery中常见的两种入口函数：

        // 第一种: 简单易用。
        $(function () {
            // 此处是页面 DOM 加载完成的入口
            $('div').hide()

        });

        // 第二种: 繁琐，但是也可以实现
        $(document).ready(function () {
            //  此处是页面DOM加载完成的入口
        });
    </script>
</body>

</html>

4. 顶级对象’$’

image-20230308232007347

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
    <!-- -1. 引入jQuery文件 -->
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 1.$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
        $(function() {
            // $('div').hide()
        })

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

        // 2.$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
    </script>
</body>

</html>

5. jQuery 对象和 DOM 对象

image-20230308232045755

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>
    <!-- -1. 引入jQuery文件 -->
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 

        // 1.用原生 JS 获取来的对象就是 DOM 对象
        var box = document.querySelector('div')

        // 2.jQuery 方法获取的元素就是 jQuery 对象。
        $('div') //$('div')jQuery 对象

        // $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
        // 3.jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
        console.log(box);
        console.log($('div'));//伪数组形式存储

        // 注意：
        // 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
    </script>
</body>

</html>

6. jQuery 对象和 DOM 对象转换

image-20230308232133137

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>
    <!-- -1. 引入jQuery文件 -->
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // DOM 对象与 jQuery 对象之间是可以相互转换的。
        // 因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 
        // 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

        // 1.DOM对象转换成jQuery对象，方法只有一种
        var box = document.getElementById('box');  // 获取DOM对象
        var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

        // 2.jQuery 对象转换为 DOM 对象有两种方法：
        //   2.1 jQuery对象[索引值]
        var domObject1 = $('div')[0]

        //   2.2 jQuery对象.get(索引值)
        var domObject2 = $('div').get(0)
    </script>
</body>

</html>
  • 视频案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.6.0.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();
        // $(myvideo).play();  jquery里面没有play 这个方法

        // 2.  jQuery对象转换为DOM对象
        $('video')[0].play()
        $('video').get(0).play()
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~