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

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

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

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

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

语法：

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

示例：

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

  • 上述示例将为具有 id 为 myButton 的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。

  • 可以使用.on()方法绑定多个事件处理程序，或者为多个事件同时绑定同一个处理程序。例如：

$('#myElement').on({
    click: function() {
        // 处理点击事件的代码
    },
    mouseenter: function() {
        // 处理鼠标进入事件的代码
    }
});

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

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

语法：

$(selector).eventName(eventHandler);

示例：

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

  • 上述示例使用.click()方法为具有 id 为 myButton 的元素绑定点击事件，当按钮被点击时，执行相应的处理函数。

  • 快捷事件方法的命名通常与对应的事件类型相同

    • 例如：.click()、.mouseenter()、.keydown() 等。

【3】示例

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

</head>
<body>

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

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

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

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

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

</script>
</body>
</html>

【二】克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        #b1 {
            height: 100px;
            width: 100px;
            background-color: red;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
<button id="b1">
    倚天屠龙剑,你敢要我就敢送!
</button>

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

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

    })
</script>
</body>
</html>

【三】自定义模态框

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128, 128, 128, 0.4);
            z-index: 99;
        }

        .modal {
            position: fixed;
            height: 400px;
            width: 400px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 100;

        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>

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

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

<div class="cover hide"></div>
<div class="modal hide">
    <p>username:<input type="text"></p>
    <p>password:<input type="password"></p>
    <input type="button" value="确认">
    <input type="button" value="取消" id="d2">
</div>

<script>
    let $coverEle = $(".cover");
    let $modalEle = $(".modal");

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

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

</script>

</body>
</html>

【四】左侧菜单

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

        .left {
            float: left;
            background-color: darkgray;
            width: 20%;
            height: 100%;
            position: fixed;
        }

        .title {
            font-size: 24px;
            color: white;
            text-align: center;
        }

        .items {
            border: 1px solid blue;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>
<div class="left">
    <dic class="menu">
        <div class="title">菜单一
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>

        <div class="title">菜单二
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>

        <div class="title">菜单三
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>

        <div class="title">菜单四
            <div class="items">1111</div>
            <div class="items">2222</div>
            <div class="items">3333</div>
        </div>
    </dic>

</div>


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


</body>
</html>

【五】返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        .hide {
            display: none;
        }
        #d1 {
            position : fixed;
            background-color: blue;

            right: 20px;
            bottom:20px;
            height:50px;
            width:50px;
        }

    </style>
</head>
<body>

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

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

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

<script>
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100){
            $('#d1').removeClass('hide');
        }else{
            $('#d1').addClass('hide');
        }
    })
</script>
</body>
</html>

【六】自定义登录校验

  • 在获取用户名和密码的时候，如果用户没有输入用户名和密码，自动提示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="button">提交</button>


<script>
    let $userName = $("#username");
    let $password = $("#password");

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

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

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

    });

    $('input').focus(function () {
        $(this).next().text('')
    })


</script>

</body>
</html>

【七】input框实时监控

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

</head>
<body>

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

<script>
    $('#d1').on('input', function () {
        console.log(this.value);
    })
</script>

</body>
</html>

【八】hover事件

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

</head>
<body>

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

<script>

  $("#d1").hover( function(){ // 鼠标悬浮
    alert(" enter")
  },function(){
    alert(" leave") // 鼠标离开
  })

</script>

</body>
</html>

【九】键盘按键监控事件

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

</head>
<body>


<script>
  $(window).keydown(function(event) {
    console.log(event.keyCode)
    if (event.keyCode === 16){
      alert("shift key 触发")
    }
  })

</script>

</body>
</html>
posted @ 2023-07-06 15:08  Chimengmeng  阅读(12)  评论(0)  编辑  收藏  举报