python之JQuery（hover，input值动态变化的实现） 

#--hover的实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .menu{
            height:50px;
            width:100%;
            background-color: #0f0f0f;
            color:darkgray;
        }
        .menu>ul{
            list-style-type:none;
            margin:0;
            padding: 0;
        }
        .menu>ul>li{
            float:left;
            line-height: 50px;
            /*每个li的右边距*/
            margin-right:15px;
            position:relative;
        }
        .id-card{
            background-color: #2459a2;
            color:white;
            height:50px;
            width:100px;
            position: absolute;
            /*右对齐*/
            right:0;
            /*先设为隐藏*/
            display:none;
        }
        /*添加hover,hover添加位于鼠标移动到所需hover的那个标签，而不是隐藏的那个子标签*/
        .hover>.id-card{
            display:block;
        }
    </style>
</head>
<body>
<div class="menu">
    <ul>
        <li>登录</li>
        <li>验证</li>
        <li class="card">购物车
            <div class="id-card">
                空空如也~
            </div>
        </li>
    </ul>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
    //hover绑定事件分为两步骤，一是鼠标进入事件，二是鼠标划出事件
    $('.menu').on('mouseenter', '.card', function() {//绑定鼠标进入事件
        $(this).addClass('hover');
    });
    $('.menu').on('mouseleave', '.card', function() {//绑定鼠标划出事件
        $(this).removeClass('hover');
    });
    //其他的做法
        // $(".card").hover(
    //     function () {
    //         // 鼠标移进来
    //         $(".id-cart").css("display", "block");
    //
    // },
    //     function () {
    //         // 鼠标移出去
    //          $(".id-cart").css("display", "none");
    //     }
    // )

    // $(".card").hover(
    //     function () {
    //         $(this).addClass("hover");
    //     },
    //     function () {
    //         $(this).removeClass("hover");
    //     }
    // );
</script>
</body>
</html>




#--input输入框值动态变化（如搜索框中实时追踪输入的数据匹配相应的搜索项）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

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

<script src="jquery-3.4.1.min.js"></script>
<script>
    // input框失去焦点就触发
    // $("#i1").blur(function () {
    //     var value = $(this).val();
    //     console.log(value);
    // });


    // 只要input框的值发生变化就触发
    $("#i1").on("input", function () {
        var value = $(this).val();
        console.log(value);
    })
</script>

</body>
</html>

 

posted @ 2019-09-25 20:35  LBC不认输  阅读(395)  评论(0)    收藏  举报