jquery 基础3mouseenter mouseleave ★在进入子元素区域的时候不会触发 mouseover和

mouseenter事件与mouseleave事件

<style>
        .div1{
            width: 300px;
            height: 300px;
            border:1px solid red;
        }
        .div2{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <body>
    <div class="div1">
        <div class="div2">

        </div>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* hover 由mouseenter和mouseleave组成 */
        // $('.div1').hover(function(){
        //     console.log(1);
        // })

        /*  mouseenter mouseleave ★在进入子元素区域的时候不会触发*/
        // $('.div1').mouseenter(function(){
        //     console.log('mouseenter');
        // })
        // $('.div1').mouseleave(function(){
        //     console.log('mouseleave');
        // })

        /*  mouseover和 mouseout 在进入子元素区域的时候也会触发*/
        // $('.div1').mouseover(function(){
        //    console.log('mouseover')
        // })
        // $('.div1').mouseout(function(){
        //     console.log('mouseout')
        // })
    </script>

</body>

轮播图

<style>
        .box {
            width: 500px;
            height: 300px;
            margin: 30px auto;
            border: 1px solid cyan;
            position: relative;
        }

        .img-list img {
            width: 500px;
            height: 300px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        .left,
        .right {
            position: absolute;
            width: 30px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,.15);
            font-size: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .left {
            left: 0;
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        .right {
            right: 0;
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }
    </style>
    <body>
    <div class="box">
        <div class="img-list">
            <img src="./imgs/1.jpg" alt="" style="display: block;">
            <img src="./imgs/2.jpg" alt="" style="display: none;">
            <img src="./imgs/3.jpg" alt="" style="display: none;">
            <img src="./imgs/4.jpg" alt="" style="display: none;">
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        let i = 0;
        let timer = null
        $('img').eq(i).show().siblings().hide();
        /* 自动播放 */
        show();

        $('.left').click(function () {
            /* 先清空定时器 阻止自动播放 */
            clearInterval(timer)
            i--;
            /* 防止减到-1 找不到对应的图片 */
            if (i == -1) {
                i = $('img').length - 1
            }
            /* 展示当前对应的图片其他图片淡出 */
            $('img').eq(i).show().siblings().hide();
            /* 继续开始自动播放 */
            show();
        })

        $('.right').click(function () {
            /* 先清空定时器 阻止自动播放 */
            clearInterval(timer)
            i++;
            /* 防止减到-1 找不到对应的图片 */
            if (i == $('img').length) {
                i = 0
            }
            /* 展示当前对应的图片其他图片淡出 */
            $('img').eq(i).show().siblings().hide();
            /* 继续开始自动播放 */
            show();
        })

        /* 定时器 过2秒 显示一张图 显示最后一张图的时候 
        再跳到第一张 */

        function show() {
            timer = setInterval(function () {
                i++
                if (i == $('img').length) {
                    i = 0
                }
                /* fadeIn淡入  fadeOut淡出 */
                $('img').eq(i).fadeIn().siblings().fadeOut();
            }, 2000)
        }

    </script>


</body>

键盘事件

<body>
    用户名：<input type="text" name="" id="">
    密码：<input type="password" name="" id="">
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* 按下键盘时 */
        // $('input[type=text]').keydown(function(){
        //     alert('我按下了')
        // })
        /* 释放按键时 */
        // $('input[type=password]').keyup(function(){
        //     alert('鼠标抬起了')
        // })
        /* 产生可打印的字符时 连续敲击键盘的时候触发 */
        // $('input[type=password]').keypress(function(){
        //     alert('连续敲击键盘')
        // })
        $(document).keyup(function(e){
            /* 敲击回车的时候触发 */
            if(e.keyCode==13){
                alert('我提交了')
            }
        })
    </script>

</body>