【16.0】前端基础jQuery之jQuery事件#

【一】jQuery绑定事件的两种方式#

【1】使用`.on()`方法：#

使用.on()方法可以绑定一个或多个事件处理程序到选择器匹配的元素上。该方法可以为动态添加的元素提供事件绑定。

语法：#

1
$(selector).on(eventName, eventHandler);

示例：#

1
$('#myButton').on('click', function() {
2
    // 处理点击事件的代码
3
});

上述示例将为具有 id 为 myButton 的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。
可以使用.on()方法绑定多个事件处理程序，或者为多个事件同时绑定同一个处理程序。例如：

1
$('#myElement').on({
2
    click: function() {
3
        // 处理点击事件的代码
4
    },
5
    mouseenter: function() {
6
        // 处理鼠标进入事件的代码
7
    }
8
});

【2】使用快捷事件方法：#

jQuery 提供了一系列的快捷事件方法，用于常见的事件类型，例如点击、鼠标移入、键盘按下等。这些方法具有对应事件类型的简洁命名，可以更方便地进行事件绑定。

语法：#

1
$(selector).eventName(eventHandler);

示例：#

1
$('#myButton').click(function() {
2
    // 处理点击事件的代码
3
});

上述示例使用.click()方法为具有 id 为 myButton 的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。
快捷事件方法的命名通常与对应的事件类型相同
- 例如：.click()、.mouseenter()、.keydown() 等。

【3】示例#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<button id="b1">吻我</button>
13
<button id="b2">抱我</button>
14

15
<script>
16
    // 绑定事件的两种方式
17

18
    // （1）第一种
19
    // jQuery
20
    $('#b1').click(function () {
21
        alert('别说话 吻我!')
22
    })
23

24
    // JavaScript
25
    // document.getElementById('b2').onclick(function () {})
26

27
    // （2）第二种 - 功能更加强大：支持事件委托
28
    $("#b2").on('click', function () {
29
        alert('抱紧我!')
30
    })
31

32
</script>
33
</body>
34
</html>

【二】克隆事件#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8
    <style>
9
        #b1 {
10
            height: 100px;
11
            width: 100px;
12
            background-color: red;
13
            border: 1px solid orange;
14
        }
15
    </style>
16
</head>
17
<body>
18
<button id="b1">
19
    倚天屠龙剑,你敢要我就敢送!
20
</button>
21

22
<script>
23
    // 绑定点击事件
24
    $("#b1").on("click", function () {
25
        // console.log(this) // this 指代的永远是当前被操作的对象
26

27
        $(this).clone(true).insertAfter($('body')) // clone 默认情况下只克隆 html 和 css 不克隆事件本身
28
        // clone 加参数 即可克隆事件
29

30
    })
31
</script>
32
</body>
33
</html>

【三】自定义模态框#

本质就是给标签添加或移除 hidden 属性

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8
    <style>
9
        .cover {
10
            position: fixed;
11
            top: 0;
12
            left: 0;
13
            right: 0;
14
            bottom: 0;
15
            background-color: rgba(128, 128, 128, 0.4);
16
            z-index: 99;
17
        }
18

19
        .modal {
20
            position: fixed;
21
            height: 400px;
22
            width: 400px;
23
            background-color: white;
24
            top: 50%;
25
            left: 50%;
26
            margin-left: -300px;
27
            margin-top: -200px;
28
            z-index: 100;
29

30
        }
31

32
        .hide {
33
            display: none;
34
        }
35

36
    </style>
37
</head>
38
<body>
39

40
<div>我是最下面的</div>
41

42
<button id="d1">点我登陆</button>
43

44
<div class="cover hide"></div>
45
<div class="modal hide">
46
    <p>username:<input type="text"></p>
47
    <p>password:<input type="password"></p>
48
    <input type="button" value="确认">
49
    <input type="button" value="取消" id="d2">
50
</div>
51

52
<script>
53
    let $coverEle = $(".cover");
54
    let $modalEle = $(".modal");
55

56
    // 去除hide属性
57
    $("#d1").click(function () {
58
        // 将两个div标签的hide属性移除
59
        $coverEle.removeClass("hide");
60
        $modalEle.removeClass("hide");
61
    })
62

63
    // 绑定 hide属性
64
    $('#d2').on('click', function () {
65
        $coverEle.addClass("hide");
66
        $modalEle.addClass("hide");
67
    })
68

69
</script>
70

71
</body>
72
</html>

【四】左侧菜单#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8
    <style>
9

10
        .left {
11
            float: left;
12
            background-color: darkgray;
13
            width: 20%;
14
            height: 100%;
15
            position: fixed;
16
        }
17

18
        .title {
19
            font-size: 24px;
20
            color: white;
21
            text-align: center;
22
        }
23

24
        .items {
25
            border: 1px solid blue;
26
        }
27

28
        .hide {
29
            display: none;
30
        }
31

32
    </style>
33
</head>
34
<body>
35
<div class="left">
36
    <dic class="menu">
37
        <div class="title">菜单一
38
            <div class="items">1111</div>
39
            <div class="items">2222</div>
40
            <div class="items">3333</div>
41
        </div>
42

43
        <div class="title">菜单二
44
            <div class="items">1111</div>
45
            <div class="items">2222</div>
46
            <div class="items">3333</div>
47
        </div>
48

49
        <div class="title">菜单三
50
            <div class="items">1111</div>
51
            <div class="items">2222</div>
52
            <div class="items">3333</div>
53
        </div>
54

55
        <div class="title">菜单四
56
            <div class="items">1111</div>
57
            <div class="items">2222</div>
58
            <div class="items">3333</div>
59
        </div>
60
    </dic>
61

62
</div>
63

64

65
<script>
66
    $('.title').click(function () {
67
        // 先给所有的items 加 hidden
68
        $('.items').addClass('hide');
69
        // 再将被点击的 items 标签内部的hidden移除
70
        $(this).children().removeClass('hide');
71
    })
72
</script>
73

74

75
</body>
76
</html>

【五】返回顶部#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8
    <style>
9
        .hide {
10
            display: none;
11
        }
12
        #d1 {
13
            position : fixed;
14
            background-color: blue;
15

16
            right: 20px;
17
            bottom:20px;
18
            height:50px;
19
            width:50px;
20
        }
21

22
    </style>
23
</head>
24
<body>
25

26
<a href="" id="d1"></a>
27

28
<div style="height: 500px;background-color: red;"></div>
29
<div style="height: 500px;background-color: green;"></div>
30
<div style="height: 500px;background-color: orange;"></div>
31

32
<a href="#d1" class="hide">回到顶部</a>
33

34
<script>
35
    $(window).scroll(function(){
36
        if ($(window).scrollTop() > 100){
37
            $('#d1').removeClass('hide');
38
        }else{
39
            $('#d1').addClass('hide');
40
        }
41
    })
42
</script>
43
</body>
44
</html>

【六】自定义登录校验#

在获取用户名和密码的时候，如果用户没有输入用户名和密码，自动提示

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11
<p>username:
12
    <input type="text" id="username">
13
    <span style="color: red"></span>
14
</p>
15
<p>password:
16
    <input type="text" id="password">
17
    <span style="color: red"></span>
18
</p>
19
<button id="button">提交</button>
20

21

22
<script>
23
    let $userName = $("#username");
24
    let $password = $("#password");
25

26
    $("#button").click(function () {
27
        // 获取用户名和密码。进行校验
28
        let username = $userName.val();
29
        let password = $password.val();
30

31
        if (!username) {
32
            $userName.next().text("用户名不能为空!")
33
        }
34

35
        if (!password) {
36
            $password.next().text("密码不能为空!")
37
        }
38

39
    });
40

41
    $('input').focus(function () {
42
        $(this).next().text('')
43
    })
44

45

46
</script>
47

48
</body>
49
</html>

【七】input框实时监控#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<input type="text" id="d1">
13

14
<script>
15
    $('#d1').on('input', function () {
16
        console.log(this.value);
17
    })
18
</script>
19

20
</body>
21
</html>

【八】hover事件#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<p id="d1">花前月下酒香封</p>
13

14
<script>
15

16
  $("#d1").hover( function(){ // 鼠标悬浮
17
    alert(" enter")
18
  },function(){
19
    alert(" leave") // 鼠标离开
20
  })
21

22
</script>
23

24
</body>
25
</html>

【九】键盘按键监控事件#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12

13
<script>
14
  $(window).keydown(function(event) {
15
    console.log(event.keyCode)
16
    if (event.keyCode === 16){
17
      alert("shift key 触发")
18
    }
19
  })
20

21
</script>
22

23
</body>
24
</html>

音乐

音乐

【16.0】前端基础jQuery之jQuery事件#

【一】jQuery绑定事件的两种方式#

【1】使用`.on()`方法：#

语法：#

示例：#

【2】使用快捷事件方法：#

语法：#

示例：#

【3】示例#

【二】克隆事件#

【三】自定义模态框#

【四】左侧菜单#

【五】返回顶部#

【六】自定义登录校验#

【七】input框实时监控#

【八】hover事件#

【九】键盘按键监控事件#

支持与分享

音乐

jQuery 事件

【16.0】前端基础jQuery之jQuery事件#

【一】jQuery绑定事件的两种方式#

【1】使用.on()方法：#

语法：#

示例：#

【2】使用快捷事件方法：#

语法：#

示例：#

【3】示例#

【二】克隆事件#

【三】自定义模态框#

【四】左侧菜单#

【五】返回顶部#

【六】自定义登录校验#

【七】input框实时监控#

【八】hover事件#

【九】键盘按键监控事件#

支持与分享

【1】使用`.on()`方法：#